javascript - 累积的 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"
   

   如果我点击 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"
   

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

第三组帖子已加载(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

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

也就是说，这个:

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

不关心事件是否已经绑定(bind)，它会绑定(bind)一个新的副本。

我需要检查 jQuery('.button').click(someFunc); 是否也会触发多次(我相信是这样)。所以我的建议是:

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

b) 在创建按钮时向按钮添加一个类，然后在绑定(bind)事件时将其删除。

编辑:

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

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