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?

If a user modifies text in a textbox, I call a function that calls the 'off' section. That is all working as expected. — Patrick, Nov 02 '15 at 18:26
I guess provided code works in normal circumstances..You need to provide those *certain circumstances* to give better view! When will `DisableModal()` get called ? — Rayon, Nov 02 '15 at 18:29
It does not work in any circumstances. What I was saying is I am only trying to call the off() method in certain circumstances. It currently attempts to turn it off, it just doesn't remove it. I have verified this via the usual routes, including putting simple alerts() into the two functions. — Patrick, Nov 02 '15 at 18:31

score 1 · Accepted Answer · answered Jul 14 '16 at 16:18

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

score 0 · Answer 2 · answered Nov 02 '15 at 18:42

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>

score 0 · Answer 3 · answered Nov 02 '15 at 18:55

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

jQuery off() not removing click handler

3 Answers3

Linked