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

我将带有按钮的click事件绑定：

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

在一种情况下，这会被多次调用，所以当我执行一次操作时，trigger我看到了多个我想防止的ajax调用。

bind只有在未绑定之前，我该怎么办。

更新时间：2012 年8月24日：在jQuery 1.8中，不再可以使用来访问元素的事件.data('events')。（有关详细信息，请参见此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);
}

另一种方法-使用CSS类和过滤器标记此类按钮：

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

在最新的jQuery版本中，替换bind为on：

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

如果使用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

我认为最好的方法是使用live（）或委托（）在父级而不是每个子级元素中捕获事件。

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

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

通过

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

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

我写了一个很小的插件，叫做“ once”。断断续续地执行in元素。

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

并简单地：

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

为什么不使用这个

unbind() 之前 bind()

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

这是我的版本：

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)

基于@ konrad-garus的答案，但是使用data，因为我相信class应该主要用于样式设计。

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

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

由于不建议使用jQuery 1.7，.live（）和.delegate（），因此现在可以使用.on（）来

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

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

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

$('#Parent').on('click', '#myButton'  onButtonClicked);

您在父项上单击事件单击，并搜索子项“ #myButton”（如果存在）...

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

尝试：

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

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');
    });
}

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

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

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

jQuery有解决方案：

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