html input - Best way to remove an event handler in jQuery?

itemprop="text">

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

Answer

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 href="http://api.jquery.com/on/" rel="noreferrer">on()/ href="http://api.jquery.com/off/" rel="noreferrer">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');