重复调用 .load() 而不会导致重复的脚本答案

【问题标题】：Calling .load() repeatedly without causing duplicate scripts重复调用 .load() 而不会导致重复的脚本
【发布时间】：2012-03-08 21:23:19
【问题描述】：

我一直在努力解决这个问题并在 SO 上搜索类似的答案，但似乎无法弄清楚。

我有一个使用 .load() 从外部 PHP 文件加载的活动源。外部文件包含用于计算 textarea 中字符数并截断长帖子的脚本，例如：

$('.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();
    }
    });

问题在于，一旦调用了滚动函数并再次调用了 .load，则应用于之前提要中的任何选择器的脚本会“加倍”。例如，每次调用 .load() 时，都会有两个对应于 jqEasyCounter 的倒计时和两个对应于 jTruncate 的“更多”。每次调用 .load 时，实例的数量都会增加一。

我读过其他帖子，讨论如何使用选择器正确加载文件以删除脚本，然后使用 getscripts。但是当我反复调用 .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()？

【问题讨论】：

您是否有机会更改已加载提要的内容？否则我会先从加载的数据中删除脚本标签，然后再将其插入 dom
我会为.load 提供一个选择器，该选择器以需要附加的内容为目标。 .load(theHref + " #someId")
@gpasci 感谢您的回复。我不确定我是否理解你的问题。是的，我可以更改外部文件的内容和结构。如果我从加载的数据中取出脚本，如何在页面中再次应用它们？这就是我坚持的部分。谢谢！
@kevin 是的，我尝试在外部文件中定位一个 div，但是我没有脚本的功能。知道如何为每个加载事件添加它，以便它不会导致先前加载的项目重复吗？谢谢！
您可以使用事件委托绑定该功能吗？

标签： php jquery mysql duplicates infinite-scroll

【解决方案1】：

尝试使用以下方法仅加载外部文件的特定部分：

.load(theHref + " #someId");

接下来，使用事件委托来绑定事件，

$(document).delegate("event","selector",event);

最后，使用 done 回调来初始化所有插件。

$("#target").load(theHref + " #someId").done(function(){
    $(".someEl", "#target").not(".initialized").myPlugin().addClass("initialized");
})

【讨论】：

所以事件委托脚本应该进入调用外部文件的主页面，我应该从外部文件中删除所有脚本？
如果我在 .load 回调中初始化插件，是什么阻止了它们仍然被每个 .load 加载多次？
只定位你正在加载内容的 div 内的那些。由于该 div 被清空，它总是会碰到未初始化的元素。
我认为问题在于我正在附加加载的内容。它并没有完全替换目标的内容。因此，当更多元素附加到 div 时，页面上已经存在元素。
在这种情况下，使用一个类来区分已经初始化的和尚未初始化的。更新。