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

时间:2012-03-08 21:23:19

标签: php jquery mysql duplicates infinite-scroll

我一直在努力解决这个问题并在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();
    }
    });

问题是,只要调用scroll函数并再次调用.load,应用于先前在feed中的任何选择器的脚本都会“加倍”。例如,每次调用.load()时,都会有两个与jqEasyCounter对应的倒计时和两个对应于jTruncate的'more'。每次调用.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()吗?

1 个答案:

答案 0 :(得分:0)

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

.load(theHref + " #someId");

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

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

最后,使用done回调来初始化任何插件。

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