jquery - jquery点击事件被堆叠和执行

Question

使用以下代码（在drupal中）

    ( function ($) {
  Drupal.behaviors.auction_house = {
    attach: function(context,settings) {

      $(document).ready(function(){
        // buy item animation
        $(".buy_item_button").click(function() {
          $(".slide_bags").fadeOut(222).fadeIn(222);
          return false;
        });
        // datagrid
        $('#auction_house_table').dataTable();   
      });

    }
  };
})(jQuery);

如果单击，则触发事件，如果再次单击，则触发事件 2 次，然后 3 次，然后 4 次，依此类推。所以让我们称之为“被堆叠”。重要信息：包含附加 onclick 功能的链接的内容是通过 ajax 加载的。

这怎么会发生，我该如何防止这种情况发生？

Answer 1

'click'我猜你正在多次绑定事件（当加载 ajax 内容时）。您可以unbind再次绑定之前的事件，也可以在重新绑定之前检查事件是否已经绑定：

在绑定事件之前取消绑定：

$(".buy_item_button").unbind('click').click(function() {
    //your code...
});

此外，请参阅此链接以检查事件是否已绑定到元素。

但我认为最好的方法是将click事件仅绑定到最新添加的内容。因此，与其将事件直接绑定到.buy_item_button选择器；您可以选择新内容和有班级find的孩子：.buy_item_button

$("#new-content").find(".buy_item_button").click(function() {
    //your code...
});