累计jQuery函数

Question

我正在使用 Infinite Ajax Scroll 通过 ajax 加载内容（每次新加载 3 posts，每个 posts 有 "button"）。

(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 ');            
    });
}

初始页面加载（3 post秒：A、B、C）：

我立即收到以下警报：
```
"1. Initial load"

"End"
```
如果我点击 post-A 中的按钮，那么，我会收到 "Button is clicked" 警报

下一组 post 已加载（6 post：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"

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

加载第三组post（9 post：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) 在绑定事件时向按钮添加一个 class，然后忽略带有 class 的对象。

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

编辑：

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

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

累计jQuery函数

Accumulated jQuery Function

javascript

ajax

jquery

infinite-scroll