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

Question

我正在用一个按钮绑定一个点击事件：

$('#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') 访问元素的事件。 （有关详细信息，请参阅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+：

您可以在on之前拨打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() 在父元素中而不是在每个子元素中捕获事件。

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

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

通过

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

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

Answer 5

我写了一个非常小的插件，叫做“once”。在元素中执行关闭和开启。

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

Answer 7

这是我的版本：

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 8

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

由于 Jquery 1.7，.live(), .delegate() 已被弃用，现在您可以使用 .on() 来

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

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

当你像这样使用 .on() 时：

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

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

所以当你删除或添加子元素时，你不必担心是添加还是删除事件绑定。

Answer 9

基于@konrad-garus 的回答，但使用data，因为我认为class 应该主要用于造型。

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

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