Atchyut Nagabhairava Atchyut Nagabhairava - 3 months ago 9
Javascript Question

How to disable and re enable the click functionality of a div using Jquery

For this question there are some other related questions which explains the possibility of the re enabling of

input field
or
button
using
disabled
attribute.

But my requirement is for re-enablebing the div click functionality after some action. Currently I'm using
.off()
for disabling the click function of a div after first click.

But I'm not able to re-enable it back.

Code where div is disabled

$(document).ready(function(){
// Will ask for city through voice when user click on the instruction box.
var accessBtn = $('#skitt-listening-box');
$("#skitt-listening-box").click(function(){
$(this).off('click'); // code to disble div from click
//some functionality
});

});


Code where div is enabled:

if(IsEmail($(".voice_email").val())) {
//some functionality
//Should re-enable the div to click here
});

Answer

If I were you i try adding css classes to describe state.

In your way:

$(document).ready(function(){
   // Will ask for city through voice when user click on the instruction box.
    var $accessBtn = $('#skitt-listening-box');
    $accessBtn.click(function(){
       if($(this).hasClass('click-available'){
         //do action
         $(this).removeClass('click-available');
       }
    });
});

And to enable click:

if(IsEmail($(".voice_email").val())) {
    $accessBtn.addClass('click-available');            
});
Comments