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

Question

我有一个使用 waypoints 无限滚动器插件加载内容的页面。

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?