2

我有一个带有航点无限滚动插件的页面加载内容。

在 AJAX 调用成功并添加 DOM 元素后，将运行回调以重新初始化 javascript 功能，如轮播、按钮和其他动画。

在第一次 AJAX 调用中，负责切换的按钮正常工作。在下一次 AJAX 调用中，新的 DOM 项工作，但之前的按钮现在在单击时执行两次切换。在第三次调用中，原始项目现在运行三次，第二个项目运行两次，新项目运行一次，依此类推，第四次，随着 AJAX 内容的调用继续复合。

如何隔离回调以不影响之前加载的内容，或者，有没有办法为JS设置全局状态，这样我就不需要每次都需要回调？

一些伪代码：

$('.infinite-container').waypoint('infinite', {

    onAfterPageLoad: function() { 

        //Carousel options     
        $('.carousel-container').carousel({
            options: here,
            ....
        }); 

        //Button Toggles
        $('.button').click(function(){

            var self = $(this); 

            $(this).siblings('.caption').animate({ 

               height: 'toggle'

               }, 200, function() {

                 // Callback after animate() completes.
                 if(self.text() == 'Hide Details'){

                   self.text('Show Details');

                 } else {

                   self.text('Hide Details');
                 }
            }); 
        }); 

     }   
});

编辑：谢谢大家。所有的答案都让我找到了不同但合适的解决方案。之所以选择所选内容，是因为它汇集了所有建议的问题，值得一读。

4

4 回答 4

2

每次执行该代码块时，您都会附加一个新的单击处理程序。结果是多个单击处理程序绑定到您的按钮。使用 jQuery 的取消绑定：http ://api.jquery.com/unbind/在添加新的单击处理程序之前删除任何单击处理程序：

$('.infinite-container').waypoint('infinite', {

    onAfterPageLoad: function() { 

        //Carousel options     
        $('.carousel-container').carousel({
            options: here,
            ....
        }); 

        // Un-bind click handler(s)
        $('.button').unbind('click');

        //Button Toggles
        $('.button').click(function(){

            var self = $(this); 

            $(this).siblings('.caption').animate({ 

               height: 'toggle'

               }, 200, function() {

                 // Callback after animate() completes.
                 if(self.text() == 'Hide Details'){

                   self.text('Show Details');

                 } else {

                   self.text('Hide Details');
                 }
            }); 
        }); 

     }   
});
于 2013-04-29T18:24:34.123 回答
2

尝试仅将一次click事件绑定到按钮。当然你可以使用on而不是live。

$('.button').live('click', function(){
    var self = $(this); 
    $(this).siblings('.caption').animate({ 
       height: 'toggle'
       }, 200, function() {
         // Callback after animate() completes.
         if(self.text() == 'Hide Details'){
           self.text('Show Details');
         } else {
           self.text('Hide Details');
         }
    }); 
}); 
$('.infinite-container').waypoint('infinite', {
    onAfterPageLoad: function() { 
        //Carousel options     
        $('.carousel-container').carousel({
            options: here,
            ....
        }); 
        //Button Toggles
     }   
});
于 2013-04-29T18:25:58.933 回答
2

看看这个答案。我认为这与您遇到的情况相同并且有解决方案：

在 jQuery 中删除事件处理程序的最佳方法？

于 2013-04-29T18:21:09.383 回答
1 
$('.button').click(function(){

您为每个具有类的按钮添加一个事件处理程序button。添加第二个按钮后，您将其添加到每个...，这意味着按钮 1 和按钮 2。依此类推。

尝试

$('.button').last().click(function(){
于 2013-04-29T18:24:47.130 回答