我一直在努力解决这个问题,并在SO上搜索类似的答案,但似乎无法解决这个问题。
我有一个活动提要,我正在使用.load()从外部PHP文件加载。外部文件包含用于计算文本区域中字符数和截断长帖子的脚本,如:
$('.watermark_comment').jqEasyCounter({'maxChars': 2000,'maxCharsWarning': 1990,'msgFontSize': '10px','msgFontColor': '#666666','msgFontFamily': 'Arial','msgTextAlign': 'left','msgWarningColor': '#F00','msgAppendMethod': 'insertAfter' }); $('.truncate').jTruncate();
当页面第一次加载时,一切都很完美。然而,我在外部文件中也有一个脚本来创建无休止的滚动。"href"包含分页查询字符串:
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 500) {
//Add something at the end of the page
$('<div></div>').appendTo('#activity_feed_load').load($('.older_posts:last').attr('href'));
$('.older_posts:first').remove();
}
});
问题是,只要调用了scroll函数并再次调用了.load,应用于提要中先前任何选择器的脚本就会"加倍"。例如,每次调用.load()时,都会有两个与jqEasyCounter相对应的倒计时和两个与jTruncate相对应的"more"。每次调用.load时,实例数都会增加一。
我读过其他文章,讨论如何使用选择器删除脚本,然后使用getscript来正确加载文件。但是,当我反复调用.load并附加结果时,我该怎么做呢?
非常感谢在这方面的帮助!
更新好的,根据Kevin的建议,我已经从外部文件中删除了加载脚本,并将其放在主文件中,如下所示:
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 500) {
//Add something at the end of the page
$('<div></div>').appendTo('#activity_feed_load #no_script').load($('.older_posts').not(".ignore").attr('href')).done(function(){
$('.older_posts').not(".ignore").addClass("ignore");
$('.watermark_comment').not(".initialized").jqEasyCounter({
'maxChars': 2000,
'maxCharsWarning': 1990,
'msgFontSize': '10px',
'msgFontColor': '#666666',
'msgFontFamily': 'Arial',
'msgTextAlign': 'left',
'msgWarningColor': '#F00',
'msgAppendMethod': 'insertAfter'
}).addClass("initialized");
});
}
});
我试图在加载后删除寻呼机链接,然后在下次调用加载时使用最新的寻呼机链接。不幸的是,当我滚动时,脚本会触发一次,然后页面就会冻结。不确定我是否正确绑定了滚动事件。我应该使用.on()还是.live()?
尝试使用只加载外部文件的特定部分
.load(theHref + " #someId");
接下来,使用事件委派绑定事件,
$(document).delegate("event","selector",event);
最后,使用done回调来初始化任何插件。
$("#target").load(theHref + " #someId").done(function(){
$(".someEl", "#target").not(".initialized").myPlugin().addClass("initialized");
})