累积的 jQuery 函数

Question

我正在使用 Infinite Ajax Scroll 通过 ajax 加载内容（每次新加载 3 个帖子，每个帖子都有“按钮”）。

(function ($, root, undefined) {    
  $(function () {       
    'use strict';
    alert('1. Initial load');

    jQuery.ias().on('rendered', function(items) {           
        Rh_function();          
    }); 

    alert ('End');      
}); 
})(jQuery, this);

function Rh_function()
{
    jQuery('.button').click(function(e) {       
    alert('Button is clicked ');            
    });
}

1. 初始页面加载（3 个帖子：A、B、C）：

   我立即收到以下警报：

   "1. Initial load"
   
   "End"
   

   如果我点击 post-A 中的按钮，那么，我会收到“按钮被点击”警报

2. 下一组帖子已加载（6 个帖子：A、B、C、D、E、F） 单击按钮时，我会收到以下警报：

   Post-A(1st load): 
           "Button is clicked"
           "Button is clicked"
   Post-B(1st load): 
           "Button is clicked"
           "Button is clicked"
   Post-C(1st load): 
           "Button is clicked"
           "Button is clicked"
   Post-D(2nd load): 
           "Button is clicked"
   Post-E(2nd load): 
           "Button is clicked"
   Post-F(2nd load): 
           "Button is clicked"
   

请注意，初始加载现在显示两个警报

1. 第三组帖子已加载（9 个帖子：A、B、C、D、E、F、G、H、I） 单击按钮时，我会收到以下警报：

   Post-A(1st load): 
           "Button is clicked"
           "Button is clicked"
           "Button is clicked"
   Post-B(1st load): 
           "Button is clicked"
           "Button is clicked"
           "Button is clicked"
   Post-C(1st load): 
           "Button is clicked"
           "Button is clicked"
           "Button is clicked"
   Post-D(2nd load): 
           "Button is clicked"
           "Button is clicked"
   Post-E(2nd load): 
           "Button is clicked"
           "Button is clicked"
   Post-F(2nd load): 
           "Button is clicked"
           "Button is clicked"
   Post-G(3rd load): 
           "Button is clicked"
   Post-H(3rd load): 
           "Button is clicked"
   Post-I(3rd load): 
           "Button is clicked"
   

请注意，第一次加载现在显示三个警报，第二次加载显示两个警报。

我不确定发生了什么。

有人可以帮帮我吗？

Answer 1

这是因为您在绑定事件时并不关心给定对象是否已经绑定了事件，因此每次绑定事件时都会触发一次点击。

也就是说，这个：

jQuery('.button').click(function(e) { });

不管事件是否已经绑定，它会绑定一个新的副本。

我需要检查jQuery('.button').click(someFunc); 是否也会触发多次（我相信如此）。所以我的建议是：

a) 绑定事件时向按钮添加一个类，然后忽略具有该类的对象。

b) 在按钮创建时添加一个类，然后在绑定事件时删除它。

编辑：

根据@Stryner 的评论，更好的解决方案是使用ias() 传递的items 数组，例如：

jQuery.ias().on('rendered', function(items) {           
    jquery.each(items,function(i, val) {
        val.click(function(e) {       
            alert('Button is clicked ');            
        });
    });
});