74

I'll try to explain the problem with a simple code.

var fireClick = function() { alert('Wuala!!!') };

$('#clickme').click(fireclick);
$('#clickme').click(fireclick);

So now it will obviously alert 2 times but i need it alert only once. Tried so many ways, but no result.

Thanks.

Seb
  • 24,063
  • 5
  • 57
  • 82
taras
  • 2,163
  • 5
  • 33
  • 43

6 Answers6

136

As of jQuery 1.7 you should be using off to remove event handlers and on to add them, though you can still use the click shorthand.

$('#clickme').off('click').on('click', fireclick);
$('#clickme').off().on('click', fireclick);

Original answer:

If you want to replace all click handlers, call unbind first without a function argument. If you want to replace all event handlers, don't specify the event type.

$('#clickme').unbind('click').click(fireclick);
$('#clickme').unbind().click(fireclick);
tvanfosson
  • 490,224
  • 93
  • 683
  • 780
  • 1
    Bah! You win for chaining the call, but maybe refine your answer so it only removes the specific handler being re-added? So: $('#clickme').unbind('click', fireclick).click(fireclick) – Mark Renouf Apr 12 '09 at 11:32
  • 4
    The question was "overwrite jquery event handlers" -- I was assuming that he wanted to replace them all. To do that he needs to call unbind each time (which is why I repeated the call on both) and not specify a function argument. – tvanfosson Apr 12 '09 at 12:03
  • 3
    This was definitely the right way to do this when you answered the question, so I've upvoted. That said, I believe the "new and improved" way is with the on() and off() methods. Since this answer is the first google result for the search "jquery replace event handler" it might be helpful to add to your answer. `$('#clickme').off('click').on('click', fireclick);` or simply `$('#clickme').off('click').click(fireclick);`. – chucksmash Apr 22 '13 at 15:35
  • @IamChuckB thanks for the update, I've added that to my answer. – tvanfosson Apr 22 '13 at 19:11
24

Use a namespace to make sure you don't remove any other listeners:

$('#clickme').off('click.XXX').on('click.XXX', fireclick);

As long as no other code uses XXX, you can be sure that you have not messed up some other behaviour that you weren't aware of.

RichieHindle
  • 244,085
  • 44
  • 340
  • 385
Neil Stevens
  • 785
  • 7
  • 11
18

You may use the jQuery function unbind to remove the first event:

var fireClick = function() { alert('Wuala!!!') };

$('#clickme').click(fireclick);
$('#clickme').unbind('click', fireClick); // fireClick won't fire anymore...
$('#clickme').click(fireclick); // ...but now it will
moff
  • 6,177
  • 29
  • 30
3

I would try to eliminate the extra calls, but short of tyhat you could make sure to call both of these each time:

$('#clickme').unbind('click', fireclick);
$('#clickme').click(fireclick);
Mark Renouf
  • 29,573
  • 19
  • 89
  • 120
0
$(document).off('click', '#clickme').on('click', '#clickme', fireclick);
Hassan Ejaz
  • 133
  • 2
  • 13
-11

You should use setInterval. The problem is that you cannot have two alerts pop at the same time. First one has to close first or the second one can't appear on screen...

LeroyV
  • 1