How to disable all onClick on a child div

Question

I have a div with id registerModal. I wanted to disable all the 'click' event inside the div. For example, I have the following:

<a id="instagram-login-btn" class="inst-btn" href="">

</a>

and the following:

$('#instagram-login-btn').on('click', function (event) {

});

I tried to do:

$('#registerModal').off('click', '**');

but it didn’t work. Any other way to disable all clicks on child divs?

Answer 1

Use event delegation that is disabled by the presence of the class.

var modal = $('#registerModal');

modal.on('click', "#instagram-login-btn:not(.disabled)", function(event) {
    // the handler
});
modal.on("click", "#another_element:not(.disabled)", function(event) {
    // the handler
});

Then, to disable them, add a class disabled.

$("#registerModal *").addClass("disabled");

And remove the class to include.

$("#registerModal *").removeClass("disabled");

This is an add / remove class for all nested elements, but your actual code may be more targeted.

---

- , .

var modal = $('#registerModal');

modal.on('click', "#instagram-login-btn", function(event) {
    // the handler
});
modal.on("click", "#another_element", function(event) {
    // the handler
});

, ,

$("#registerModal *").on("click", function(event) { event.stopPropagation() });

.

$("#registerModal *").off("click");

, .

Answer 2

Try

$('#registerModal').find('*').addBack().off('click',);

Answer 3

To set each and check, I always do this in a loop. For example:

  $('#registerModal').find("*").each(function(i,e)
  {

      $(this).unbind("click");
  });

All answers are pragmatically correct, but I tend to notice more stable behavior with multiple event handlers using $ .each for it.