HTML

<div>
<a href='javascript:' id="foo">Foo</a>
</div>
<br>
<div id="target"></div>

的JavaScript

jQuery(function () {
    jQuery('#foo').bind('click', write);
    jQuery('#foo').bind('click', write);
    jQuery('#foo').bind('click', write);
    jQuery('#foo').bind('click', write);

   /*
      although  I am binding click event four times with same METHOD
      I want jQuery to bind it only once and ignore rest request to bind the 
      same function
  */
});
function write() {
    jQuery('#target').append('modified<br>');
}

在JavaScript中，我使用jQuery将相同的函数绑定到链接四次，但是有没有办法jQuery只处理第一个请求并忽略其他请求来绑定同一个事件。

Demo : using jQuery1.7.1

Demo : using jQuery1.3.2（我得到了预期的行为，但我想用jQuery1.7.1进行此行为）

Answer 1

您应该首先避免将事件处理程序绑定四次。

如果你不能，我建议你先绑定以前的事件处理程序（jQuery 1.7语法）：

jQuery('#foo').off('click', write).on('click', write);

您还可以使用命名空间事件：

jQuery('#foo').off('click.write').on('click.write', write);

其他任何事情都在解决问题的症状，而不是原因。 -

关于jQuery 1.3和jQuery 1.7中的不同行为：

从jQuery 1.4.2开始，重复事件处理程序可以绑定到一个元素而不是被丢弃。这在使用事件数据功能时，或者其他唯一数据驻留在事件处理函数周围的闭包中时非常有用。

Answer 2

如果你拨打event.stopImmediatePropagation()，第一个函数调用将阻止其他函数被触发。见http://api.jquery.com/event.stopImmediatePropagation/

function write(event) {
    jQuery('#target').append('modified<br>');
    event.stopImmediatePropagation();
}

有关示例，请参阅http://jsfiddle.net/RareZ/2

注意：您不希望将return false用于此目的。见http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 3

.stopImmediatePropagation()将停止为同一事件触发更多事件处理程序。

function write(event) {
    event.stopImmediatePropagation();
    jQuery('#target').append('modified<br>');
}

以下是演示：http://jsfiddle.net/gwZSC/

文档：http://api.jquery.com/event.stopimmediatepropagation

Answer 4

我不知道这样做的原生API方法，但您当然可以创建一个帮助程序来检查绑定之前是否存在事件处理程序：

// selector - The jQuery selector for the elements you wish to bind
// event    - The name of the event you wish to bind (e.g. 'click')
// handler  - The function you wish to bind the the event
function (selector, event, handler) {
    var elements = $(selector);
    for (var i = 0; i < elements.length; i++) {
        if (!$.data(elements.get(i), 'events')[event])
            elements[i].bind(event, handler);
    }

    // Alternative implementation
    // $.each($(selector), function (i, element) {
    //     if (element.data('events')[event])
    //         element.bind(event, handler);
    // });
}

如果需要，我建议将其重写为jQuery插件。

如何确保一个方法只能绑定到jQuery中的一个元素

HTML

的JavaScript

4 个答案: