绑定事件只有一次

我有以下代码:

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

someMethod被调用两次,因此点击事件绑定了两次。 我怎样才能让它绑定一次?

如果你可以应用它,可能要看看event.preventDefault和event.stopPropagation或解除绑定每一次,在你的方法

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

除了pna的回答之外,您可能希望考虑命名您的活动,以避免意外地解除所有点击事件。

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

http://docs.jquery.com/Namespaced_Events

没有内置的方法来确定您是否已经绑定了这个特定的function。 您可以将多个点击function绑定到一个对象。 例如:

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

如果你点击这个对象的时候会发出警告,然后告别。 为了确保只有一个函数绑定到click事件解绑定click事件处理程序,然后绑定所需的函数,如下所示:

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

显而易见的解决scheme是不要调用someMethod()两次。 如果你不能解决这个问题,那么你可以保留一个状态variables,所以它只能这样绑定一次:

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

注意:这使用了函数本身的一个属性,而不是引入一个全局variables来跟踪它是否被绑定。 你也可以在对象本身上使用一个属性。

你可以看到它在这里工作: http : //jsfiddle.net/jfriend00/VHkxu/ 。

jQuery使调用一些function可能只有一次很简单:

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

或者使用jQuery的one()函数,它类似于on(),但是只会触发一次事件,即使你绑定了多次。

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

这是一个build议,因为我不知道你的逻辑。 可能会或可能不适合你。

尝试结合jQuery的生活()和一个()函数将给你比事件rebinds更好的结果。

当有2个DOM元素(父&子)时,这些特殊情况就会起作用。 父节点上的Live()函数确保事件将被调用,然后调用one()来dynamic注册将只执行一次的事件。 (这提供了类似重新绑定的function)。

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

但是我可能会研究为什么它会在做出某种解决方法之前被调用两次。

如果你只想绑定一次对象,你应该实现一个标志并坚持这个对象。

例如:

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

我也试图使用jquery的方法绑定事件只有一个dom元素不存在尚未或dom元素尚未创build。

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

此代码无法正常工作

我遇到了一个非常有利可图的方法,那就是“一个”方法。 当你想要绑定一个事件时,这是非常有用的。

你可以在这里find这个文档http://api.jquery.com/one/

这与方法'on'相同,但是与其行为不同的是不同意多个select器的事件。

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

您可以将CSS类添加到绑定的元素,然后将其过滤掉:

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

这个方法也可以用于插件:

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

你可以使用这个jQuery扩展函数。

 $.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); } }; 

而不是这样做

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

雅做到这一点

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

现在,当我有一个function

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

我多次调用它

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

它只做一次。

请注意,扩展通过检查uid和types来工作。 这意味着你可以绑定不同types的处理程序与同一个用户ID,你可能会或可能不需要这个。 要改变它编辑。

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

有类似的东西

var dataStr = "handler-"+uid;