How to overwrite jquery event handlers

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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...