I have an ajax app that will run functions on every interaction. I'd like to be able to run my setup function each time so all my setup code for that function remains encapsulated. However, binding elements more than once means that the handler will run more than once, which is obviously undesirable. Is there an elegant way in jQuery to call bind on an element more than once without the handler being called more than once?

I have an ajax app that will run functions on every interaction. I'd like to be able to run my setup function each time so all my setup code for that function remains encapsulated. However, binding elements more than once means that the handler will run more than once, which is obviously undesirable. Is there an elegant way in jQuery to call bind on an element more than once without the handler being called more than once?

• javascript
• jquery

4 Answers 4

User jQuery one function like Tom said, but unbind the handler each time before binding again. It helps to have the event handler assigned to a variable than using an anonymous function.

 var handler = function(e) { // stuff };

 $('#element').unbind('click', handler).one('click', handler);

 //elsewhere
 $('#element').unbind('click', handler).one('click', handler);

You can also do .unbind('click') to remove all click handlers attached to an element.

You could attach the event to document with the one() function:

$(document).one('click', function(e) {
    // initialization here
});

Once run, this event handler is removed again so that it will not run again. However, if you need the initialization to run before the click event of some other element, we will have to think of something else. Using mousedown instead of click might work then, as the mousedown event is fired before the click event.

You can also use .off() if unbind doesn't do the trick. Make sure the selector and event given to .off exactly match the ones initially provided to .on():

$("div.selector").off("click", "a.another_selector");    
$("div.selector").on("click", "a.another_selector", function(e){

This is what worked for me in resolving the same ajax reloading problem.

The answer from Chetan Sastry is what you want. Basically just call a $(element).unbind(event); before every event.

So if you have a function like loadAllButtonClicks() that contains all the

$(element).on("click", function (){}); 

methods for each button on your page, and you run that every time a button is clicked, this will obviously produce more than one event for each button. To solve this just add

$(element).unbind(event);

before every

$(element).on("click", function (){}); 

and it will unbind all events to that element, then add the one click event.