Question

jQuery(document).on('click', 'a[id^="MenuFilterVar_"]', onClickHandler);
jQuery(document).off('click', 'a[title="Special Case Element"]'); 

The above code attaches an event to the elements that meet the selector in on(). However, when I remove the event with off() in the subsequent line (a special case element within those original elements), it removes all of the events for the elements from line one.

To my understanding, off() should only remove the event from the items meeting the selector. Am I missing something in my understanding of on/off, or is there something wrong with my code? Any help would be appreciated.

Answer 1

It looks like for .off on delegated events you need to use the same selector as you have in .on. Below is from jQuery docs…

To remove specific delegated event handlers, provide a selector argument. The selector string must exactly match the one passed to .on() when the event handler was attached. To remove all delegated events from an element without removing non-delegated events, use the special value “**”.

http://api.jquery.com/off/

You can simply add that condition if it is just 1 element. See below,

DEMO: http://jsfiddle.net/4rDgP/4/

function onClickHandler() {
    alert($(this).text());
}

jQuery(document).on('click', 'a[id^="MenuFilterVar_"]', function() {
    if (this.title == 'Special Case Element') return;   
    onClickHandler.call(this);
});

or If it is multiple elements then you can bind another handler for those elements you want to ignore and do an e.stopImmediatePropagation(). See below,

DEMO: http://jsfiddle.net/4rDgP/3/

jQuery(document).on('click', 'a[title="Special Case Element"]', function (e) {
     e.stopImmediatePropagation();
}); 
jQuery(document).on('click', 'a[id^="MenuFilterVar_"]', onClickHandler);    

Note that the e.stopImmediatePropagation(); should be above the actual handler binding.