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

Question

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              
          });

I think it is best to use .prop("disabled",true)/.prop("disabled",false) to disable/enable the button. Your if(IsEmail(...)) should be in an eventhandler though otherwise it will not run. — RST
– RST, Commented Sep 2, 2016 at 11:53

Manveru · Accepted Answer · 2016-09-02 11:48:18Z

1

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');            
});

answered Sep 2, 2016 at 11:48

Manveru

9451 gold badge10 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atchyut Nagabhairava Over a year ago

Thankyou for that little hack @manveru , it worked like a pro :)

Mikhail Lipilin · Accepted Answer · 2016-09-02 11:43:46Z

0

You can use this code:

function addClickFunctionality() {
  $("#skitt-listening-box").on('click', function(){
    $(this).off('click'); // code to disable div from click
    // some functionality
  });
}

$(document).ready(function() {
  // Will ask for city through voice when user click on the instruction box.
  addClickFunctionality();
});


// re-enable click handle in some action
if(IsEmail($(".voice_email").val())) {
  // some functionality
  addClickFunctionality();              
});

edited Sep 2, 2016 at 11:43

answered Sep 2, 2016 at 11:40

Mikhail Lipilin

697 bronze badges

1 Comment

Atchyut Nagabhairava Over a year ago

what do you mean by addClickFunctionality(); Can you make it more clear?

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related