javascript - In jQuery, is there any way to only bind a click once? - Stack Overflow

admin管理员组

文章数量:1325144

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

Share Improve this question Follow asked Jun 1, 2010 at 4:07 Chris HenryChris Henry 12k44 gold badges3232 silver badges3131 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 12

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.

本文标签： javascriptIn jQueryis there any way to only bind a click onceStack Overflow