jQuery off() not removing click handler

Question

I have the following code:

$(document).ready(function () {
  EnableModal();
});

function EnableModal() {
  if (isModalEnabled) { return; }

  // Initialize modal dialog
  // attach modal-container bootstrap attributes to links with .modal-link class.
  // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
  $('body').on('click', '.modal-link', function (e) {
    e.preventDefault();
    $(this).attr('data-target', '#modal-container');
    $(this).attr('data-toggle', 'modal');
  });

}

function DisableModal() {
  $('body').off('click', '.modal-link');
}

I am attempting to turn this off under certain circumstances, so I am calling:

$('body').off('click', '.modal-link');

However, the button with the modal-link class is still allowing click events through. I see no errors in the developers console.

I have verified it is calling these correctly and that each is only being called once in my test case.

What am I doing wrong here?

Answer 1

I met this issue before. I wasn't sure what happened at the very beginning and wonder if it was because the selectors weren't actually the same. I checked them and found out they were the same but still couldn't remove the event handler.

I finally fixed this by giving a dummy function as event handler after I removed the original one.

function DisableModal() {
$('body').off('click', '.modal-link');
$('body').on('click', '.modal-link', () => {});
}

Feel free to use ES5 version if you don't like the lambda expression. as

$('body').on('click', '.modal-link', function(){});

Answer 2

Works fine here:

 var isModalEnabled; $(document).ready(function () { EnableModal(); $(".disableModal").click(DisableModal); }); function EnableModal() { if (isModalEnabled) { return; } // Initialize modal dialog // attach modal-container bootstrap attributes to links with .modal-link class. // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog. $('body').on('click', '.modal-link', function (e) { e.preventDefault(); $(this).attr('data-target', '#modal-container'); $(this).attr('data-toggle', 'modal'); }); } function DisableModal() { $('body').off('click', '.modal-link'); } 

 body { font-family: sans-serif; } [data-target='#modal-container'] { font-weight: bold; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p>Click a few "Modal Link" buttons, and watch the button text turn bold. Then click the "Disable Modal" button, and click the remaining "Modal Link" buttons. The button text does <em>not</em> turn bold.</p> <button class="modal-link">Modal Link</button> <button class="modal-link">Modal Link</button> <button class="modal-link">Modal Link</button> <p><button class="disableModal">Disable Modal</button></p> <button class="modal-link">Modal Link</button> <button class="modal-link">Modal Link</button> <button class="modal-link">Modal Link</button> <p>To reset, click the "Run code snippet" button above.</p> 

Answer 3

Without knowing the real cause of this, maybe the solution is to use namespaced events.

$('body').on('click.modal', '.modal-link', function (e) { });

and to remove it

$('body').off('.modal');

But I have a feeling it has nothing to do with this, but with the real issue is with the bootstrap modal. Maybe you need to clean up those attributes.

$('[data-toggle="modal"]').removeAttr("data-target data-toggle");