Question

我正在使用Infinite Ajax Scroll通过ajax加载内容（每个帖子都有3个帖子，每个帖子都有＆＃34;按钮＆＃34;）。

(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个帖子：A，B，C）：

我立即收到以下提醒：
```
"1. Initial load"

"End"
```
如果我点击后A中的按钮，那么，我得到＆＃34;点击按钮＆＃34;警报

加载下一组帖子（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"

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

我不确定发生了什么。

有人能帮助我吗？

Answer 1

This is because you're binding the events without care that a given object already has the event bound, so the click gets fired off once for each time you've bound the event.

That is, this:

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

Doesn't care if the event was already bound, it will bind a new copy.

I would need to check if jQuery('.button').click(someFunc); would also fire multiple times (I believe so). So my suggestion would be to either:

a) add a class to the button when the event is bound, then ignore objects with that class.

b) add a class to the button when it is created, then remove it when the event is bound.

Edit:

Based on the comment from @Stryner, a better solution would be to use the items array passed by ias(), eg:

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

累积的jQuery函数

1 个答案: