如何检查click事件是否已绑定 - JQuery

Question

我用按钮绑定了一个click事件:

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

在一个场景中,这被多次调用,所以当我这样做时,我会trigger看到多个我想要阻止的ajax调用.

bind如果之前没有约束,我该怎么办？

Answer 1

还有一种方法 - 用CSS类和过滤器标记这样的按钮:

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

在最近的jQuery版本中替换bind为on:

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

Answer 2

更新于2012 年8月24日:在jQuery 1.8中,不再可以使用访问元素的事件.data('events').(有关详细信息,请参阅此错误.)可以使用jQuery._data(elem, 'events')内部数据结构访问相同的数据,该数据结构未记录,因此不能100%保证保持稳定.但是,这不应该是一个问题,上面插件代码的相关行可以更改为以下内容:

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

jQuery事件存储在一个被调用的数据对象中events,因此您可以在此搜索:

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 3

如果使用jQuery 1.7+:

您可以off在之前致电on:

$('#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()来捕获父级中的事件而不是每个子元素中的事件.

如果您的按钮位于#parent元素内,则可以替换:

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

通过

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

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

Answer 5

我写了一个名为"once"的非常小的插件.在元素中执行off和on.

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

简单地说:

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

Answer 6

为什么不使用这个

unbind() 前 bind()

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