Question

我使用按钮绑定点击事件：

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

在一个场景中，这被多次调用，所以当我执行trigger时，我会看到多个我想要阻止的ajax调用。

如果bind之前没有约束，我该如何。{/ p>

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')访问元素的事件。（有关详细信息，请参阅this bug。）可以使用内部数据结构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

我写了一个名为“曾经”的非常小的插件。在元素中执行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

为什么不使用这个

在unbind()

之前

bind()

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

Answer 9

为避免检查/绑定/取消绑定，您可以更改方法！你为什么不使用Jquery .on（）？

由于不推荐使用Jquery 1.7，.live（）,. delegate（），现在你可以使用.on（）来

为与当前选择器匹配的所有元素附加事件处理程序，现在和将来

这意味着您可以将事件附加到仍然存在的父元素，并附加子元素，无论它们是否存在！

当你像这样使用.on（）时：

{{1}}

你抓住事件点击父母，它搜索孩子'#myButton'如果存在...

因此，当您删除或添加子元素时，您不必担心是否添加或删除事件绑定。

Answer 10

尝试：

if (typeof($("#myButton").click) != "function") 
{
   $("#myButton").click(onButtonClicked);
}

Answer 11

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 12

从2019年6月开始，我已经更新了该功能（并且该功能可以满足我的需要）

$.fn.isBound = function (type) {
    var data = $._data($(this)[0], 'events');

    if (data[type] === undefined || data.length === 0) {
        return false;
    }
    return true;
};

Answer 13

JQuery有solution：

$( "#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 );
});

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

13 个答案: