Calling .load() repeatedly without causing duplicate scripts

Question

I have been struggling with this and searching through similar answers on SO, but can't seem to figure this out.

I have an activity feed that I am loading from an external PHP file using .load(). The external file contains scripts to count characters in textarea and truncate long posts such as:

$('.watermark_comment').jqEasyCounter({'maxChars': 2000,'maxCharsWarning': 1990,'msgFontSize': '10px','msgFontColor': '#666666','msgFontFamily': 'Arial','msgTextAlign': 'left','msgWarningColor': '#F00','msgAppendMethod': 'insertAfter' });  $('.truncate').jTruncate(); 

Everything works perfectly when the page first loads. However, I also have a script in the external file to create endless scrolling. The 'href' contains the paging querystring:

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

The problem is that as soon as the scroll function is called and the .load is called again the scripts applied to any selectors previously in the feed get 'doubled up'. For example, each time the .load() is called there becomes two countdowns corresponding to the jqEasyCounter and two 'more' corresponding to the jTruncate. Each time .load is called the number of instances is incremented by one.

I've read other posts discussing how to properly load files using a selector to remove the scripts and then using getscripts. But how would I do this when I am calling .load repeatedly and appending the results?

Would really appreciate some help on this!

Update Ok, based on Kevin's suggestions, I have removed the load script from the external file and placed it in the main file as follows:

$(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");

    });
    }
    });

I'm trying to remove the pager link after the load and then use the latest pager link the next time the load is called. Unfortunately, the script fires once when I scroll and then the page freezes. Not sure if I'm binding the scroll event correctly. Should I be using .on() or .live() instead?

Answer 1

Try loading only a specific piece of the external file using:

.load(theHref + " #someId");

Next, use event delegation to bind events,

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

Finally, use the done callback to initialize any plugins.

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