Link an event only once

Question

I have the following code:

function someMethod() { $(obj).click(function {}); } 

someMethod is called twice, and so the click event is bound twice. How can I knit it only once?

Answer 1

If you can apply it, you might want to take a look at event.preventDefault and event.stopPropagation OR untie and bind each time within your method, for example

 function someMethod() { $(obj).off('click').on('click', function(e) { // put your logic in here }); } 

Answer 2

In addition to pna's answer, you can think of the names that host your event so that you don't accidentally disable all click events.

 function someMethod () {
     $ (obj) .unbind ('click.namespace'). bind ('click.namespace', function () {});
 }

http://docs.jquery.com/Namespaced_Events

Answer 3

There is no built-in method to determine if you linked this particular function. You can associate several click functions with an object. For example:

 $('#id').bind('click', function(){ alert('hello'); }); $('#id').bind('click', function(){ alert('goodbuy'); }); 

if you do it higher when the object is clicked, it will greet hello and then goodbye. To ensure that only one function is bound to a click event, untie the click event handler, then bind the desired function as follows:

 $(obj).unbind('click').bind('click', function(){... }); 

Answer 4

The obvious solution is not to call someMethod() twice. If you cannot fix this, then you can save the state variable, so it only ever binds once:

 function someMethod() { if (!someMethod.bound) { $(obj).click(function() {}); someMethod.bound = true; } } 

Note: this uses the property of the function itself, not the introduction of a global variable to track whether it is related. You can also use the property on the object itself.

You can see how it works here: http://jsfiddle.net/jfriend00/VHkxu/ .

Answer 5

Or use the jQuery one () function, which is similar to the on () function, but only fires the event once, even if you bind it several times.

http://api.jquery.com/one/

Answer 6

jQuery allows you to call some function only once quite easily:

 function someMethod() { $(obj).click(function() {}); this.someMethod = $.noop; } 

Answer 7

This is an offer since I do not know your logic. May or may not work for you.

Try combining the functions jquery live () and one (), which will give you a better result than re-forwarding events.

Special cases work when you have 2 DOM elements (parent and child). Live () in the parent node ensures that the event will be raised, and then calls one () to dynamically register the event, which will be executed only once. (this provides similar functionality, such as reinterpretation).

Answer 8

 var bound = false; function someMethod() { if(!bound) { $(obj).click(function {}); bound = true; } } 

but I would probably look at why this was called twice before making some workaround.

Answer 9

If you want to bind to an object only once, you must implement a flag and stick to that object.

For example:

 if($('#id') && $('#id').data('done') == null)) { $('#id').bind('click', function() { alert('hello'); }); $('#id').data('done', true); } 

Answer 10

You can add a css class to related elements and then filter them:

 function someMethod() { $(obj).not('.click-binded') .click(function {}) .addClass('click-binded'); } 

This method can also be used for plugins:

  $(obj).not('.datetimepicker-applied') .datetimepicker() .addClass('datetimepicker-applied'); 

Answer 11

You can use this jQuery extension function.

 $.fn.once = function (type, fn, uid) { if(uid == undefined) { console.error("Called $.once without uid\n", this, "\n", fn); } var dataStr = type+"-handler-"+uid; if(!this.data(dataStr)) { this.data(dataStr, true); this.on(type, fn); } }; 

Instead of this

 $("button").on("click", function(){ alert("You Clicked On A Button"); }); 

I'm doing it

 $("button").once("click", function(){ alert("You Clicked On A Button"); }, "btnHandler"); 

Now that I have a function around her

 function addBtnHandler() { $("button").once("click", function() { alert("You Clicked On A Button"); }, "btnHandler"); } 

And I call it a few times

 addBtnHandler(); addBtnHandler(); addBtnHandler(); 

He does this only once.

Note that the extension works by checking both the uid and type. This means that you can bind different types of handlers with the same uid, you may or may not want this. To change it, edit.

var dataStr = type+"-handler-"+uid;

With something like

var dataStr = "handler-"+uid;

Answer 12

I also tried using the jquery on and jQuery method to bind an event only once with a dom element that does not exist yet or a dom element has not yet been created.

 $('.select').off('event').on('event', 'selector', function(e){ // }); 

This code did not work properly

I came across a very profitable method, which is the "one" method. This is very useful if you want to bind an event only once.

Here you can find the document http://api.jquery.com/one/

This is the same as the 'on' method, but differs in its behavior so as not to stick to the event for multiple selectors.

 $('body').one('click', 'selector', function(){ // do your stuff here });