jquery点击事件被堆叠和执行

【问题标题】：jquery click events being stacked and executedjquery点击事件被堆叠和执行
【发布时间】：2013-02-17 18:24:29
【问题描述】：

使用以下代码（在 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 加载的。

这怎么会发生，我该如何预防？

【问题讨论】：

标签： jquery drupal

【解决方案1】：

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

绑定事件前解绑：

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

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

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

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

【讨论】：