Question

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

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

     }   
});

编辑：谢谢大家。所有答案都引出了不同但恰当的解决方案。挑选的被选中，因为它是所有建议的问题的一个很好的集合，值得阅读。

Answer 1

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

Best way to remove an event handler in jQuery?

Answer 2

每次执行该代码块时，您都会附加一个新的单击处理程序。结果是多个点击处理程序绑定到您的按钮。使用jQuery的unbind：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');
                 }
            }); 
        }); 

     }   
});

Answer 3

尝试仅将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
     }   
});

Answer 4

$('.button').click(function(){

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

尝试

$('.button').last().click(function(){

加载AJAX内容后回调运行两次

4 个答案: