Question

我有一堆div，每个div都包含一个删除链接，附带下面的点击事件：

  var observeRemoveRoom = function
    $('.remove_room').click(function(){     
      $(this).parent().removeClass('active');
    });
  }

单击它将删除父级（div）的“活动”类。我在window load上调用了observeRemoveRoom函数，它工作正常。

问题是，我有另一个功能，它添加了更多相同的div。由于新div中包含的'a.remove_room'链接不在window.load上，我需要调用observeRemoveRoom。

我是否以某种方式重复了事件处理程序？ Jquery会覆盖它们吗？如果是这样，我应该解除处理程序的绑定吗？

Answer 1

每次调用observeRemoveRoom时，jQuery都会为点击事件添加一个新的唯一事件处理函数。

所以是的，您需要.unbind() 所有当前绑定的处理程序，只需调用不带参数的.unbind()，或者是特定的并传入函数引用。

Answer 2

是的，如果再次调用observeRemoveRoom，您将复制事件处理程序，但它可能不会引人注意，因为您只调用removeClass方法，如果找不到该类，则该方法不执行任何操作，在第一个侦听器被触发后就是这种情况。

相反，您可以每次取消绑定并重新绑定click事件，例如：

 var observeRemoveRoom = function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    $('.remove_room').off('click', remove_class).on('click', remove_class);
  }

但是说，建议您在此函数之外执行此操作，而不是每次绑定和解除绑定事件，例如：

$(document).ready(function(){
    var remove_class = function(){     
      $(this).parent().removeClass('active');
    };
    // If the element exists at dom ready, you can bind the event directly
    $('.remove_room').on("click", remove_class);
    // If the element is added in dynamically, you can [delegate][1] the event
    $('body').on("click", '.remove_room', remove_class);
    // Note: Although I've delegated the event to the body tag in this case
    // I recommend that you use the closest available parent instead
});

http://api.jquery.com/on/#direct-and-delegated-events：[1]

Answer 3

您可以尝试使用实时查询来更新它们：http://docs.jquery.com/Plugins/livequery

jQuery是否会覆盖事件监听器？

3 个答案: