Best way to remove an event handler in jQuery?
html-input, jquery
Solution
jQuery ≥ 1.7
With jQuery 1.7 onward the event API has been updated, `.bind()`/`.unbind()` are still available for backwards compatibility, but the preferred method is using the on()/off() functions. The below would now be,
$('#myimage').click(function() { return false; }); // Adds another click event
$('#myimage').off('click');
$('#myimage').on('click.mynamespace', function() { /* Do stuff */ });
$('#myimage').off('click.mynamespace');
jQuery < 1.7
In your example code you are simply adding another click event to the image, not overriding the previous one:
$('#myimage').click(function() { return false; }); // Adds another click event
Both click events will then get fired.
As people have said you can use unbind to remove all click events:
$('#myimage').unbind('click');
If you want to add a single event and then remove it (without removing any others that might have been added) then you can use event namespacing:
$('#myimage').bind('click.mynamespace', function() { /* Do stuff */ });
and to remove just your event:
$('#myimage').unbind('click.mynamespace');
Problem
I have an `input type="image"`. This acts like the cell notes in Microsoft Excel. If someone enters a number into the text box that this `input-image` is paired with, I setup an event handler for the `input-image`. Then when the user clicks the `image`, they get a little popup to add some notes to the data. My problem is that when a user enters a zero into the text box, I need to disable the `input-image`'s event handler. I have tried the following, but to no avail. ``` $('#myimage').click(function { return false; }); ```