我有一个使用 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');
}
});
});
}
});
编辑:谢谢大家。所有的答案都引导我找到不同但适当的解决方案。之所以选择所选内容,是因为它是所有建议问题的精彩集合,值得一读。
最佳答案
看看这个答案。我认为这与您遇到的情况相同并且有解决方案:
关于javascript - AJAX 内容加载后回调运行两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16285488/