如何检查点击事件是否已经绑定 – JQuery

我用一个button绑定一个单击事件：

$('#myButton').bind('click', onButtonClicked); 

在一种情况下，这是多次调用，所以当我做trigger我看到多个Ajax调用，我想要阻止。

如何bind只有当它没有绑定之前。

Answer 1

更新12年8月24日 ：在jQuery 1.8中，不再可能使用.data('events')来访问元素的事件。 （有关详细信息， jQuery._data(elem, 'events') 错误 。）可以使用jQuery._data(elem, 'events')访问相同的数据，这是一个内部数据结构，它没有logging，因此不能100％保证稳定。 但是，这不应该是一个问题，上面的插件代码的相关行可以更改为以下内容：

 var data = jQuery._data(this[0], 'events')[type]; 

---

jQuery事件存储在一个名为events的数据对象中，所以你可以在这里search：

 var button = $('#myButton'); if (-1 !== $.inArray(onButtonClicked, button.data('events').click)) { button.click(onButtonClicked); } 

当然，如果你可以构造你的应用程序，那么这个代码只会被调用一次。

---

这可以被封装成一个插件：

 $.fn.isBound = function(type, fn) { var data = this.data('events')[type]; if (data === undefined || data.length === 0) { return false; } return (-1 !== $.inArray(fn, data)); }; 

你可以打电话给：

 var button = $('#myButton'); if (!button.isBound('click', onButtonClicked)) { button.click(onButtonClicked); } 

Answer 2

还有一种方法 – 用CSS类和filter标记这些button：

 $('#myButton:not(.bound)').addClass('bound').bind('click', onButtonClicked); 

在最近的jQuery版本中用bind代替bind ：

 $('#myButton:not(.bound)').addClass('bound').on('click', onButtonClicked); 

Answer 3

如果使用jQuery 1.7+：

您可以off之前off ：

 $('#myButton').off('click', onButtonClicked) // remove handler .on('click', onButtonClicked); // add handler 

如果不：

你可以解开它的第一个事件：

 $('#myButton').unbind('click', onButtonClicked) //remove handler .bind('click', onButtonClicked); //add handler 

Answer 4

我看到的最好的方法是使用live（）或delegate（）来捕获父项中的事件，而不是在每个子元素中。

如果您的button位于#parent元素内，则可以replace：

$('#myButton').bind('click', onButtonClicked);

通过

$('#parent').delegate('#myButton', 'click', onButtonClicked);

即使执行此代码时#myButton尚不存在。

Answer 5

我写了一个非常小的名为“一次”的插件。 在元素中执行off和on。

 $.fn.once = function(a, b) { return this.each(function() { $(this).off(a).on(a,b); }); }; 

简而言之：

 $(element).once('click', function(){ }); 

Answer 6

这是我的版本：

 Utils.eventBoundToFunction = function (element, eventType, fCallback) { if (!element || !element.data('events') || !element.data('events')[eventType] || !fCallback) { return false; } for (runner in element.data('events')[eventType]) { if (element.data('events')[eventType][runner].handler == fCallback) { return true; } } return false; }; 

用法：

 Utils.eventBoundToFunction(okButton, 'click', handleOkButtonFunction) 

Answer 7

基于@ konrad-garus答案，但使用data ，因为我相信class应该主要用于造型。

 if (!el.data("bound")) { el.data("bound", true); el.on("event", function(e) { ... }); } 

Answer 8

 if ($("#btn").data('events') != undefined && $("#btn").data('events').click != undefined) { //do nothing as the click event is already there } else { $("#btn").click(function (e) { alert('test'); }); } 

Answer 9

为什么不使用这个

bind()之前的unbind() bind()

 $('#myButton').unbind().bind('click', onButtonClicked); 

Answer 10

JQuery有解决scheme ：

 $( "#foo" ).one( "click", function() { alert( "This will be displayed only once." ); }); 

当量：

 $( "#foo" ).on( "click", function( event ) { alert( "This will be displayed only once." ); $( this ).off( event ); });