Question

I have a div on my home page which uses a jQuery plugin called hoverwords to create roll-over animations for some links inside the div which looks like this:

<div id="contentWrapper">    
    <div class="animations">
            <a href="#" id="animatedText1">Text1</a>
            <a href="#" id="animatedText2">Text2</a>
            <a href="#" id="animatedText3">Text3</a>
    </div>
</div>

It loads the plugin just fine on first load using the following script:

$(function(){
     $(window).load(function(){
         $(".animations a").hoverwords();
     });    
});

I am then using AJAX to asynchronously load in the content from my other pages if JavaScript is enabled. Some of the other pages use the same hoverwords plugin and I am having a difficult time re-loading the script as it is not called as an event which I could potentially bind using .on() or .live(). Here’s how I’m loading the new content using jQuery animation to hide the page then show the new page once loaded through AJAX:

$(function() {

$(".button").click(function() {

    var anchor = $("#contentWrapper");

    var pageHeight = $("#contentWrapper").height();

    var pageName = 'null';

    var extension = '.htm';

    if ($(this).attr('id')==='home') {
        pageName = 'index';
        extension = '.html';
    } else {
        pageName = $(this).attr('id');
    }

        $.ajax({
        type : 'get',
        url : pageName + extension,

        success : function() {
            var $newContent = $('<div id="contentWrapper" />').load(pageName + extension + ' #contentWrapper > *');
            $("#contentWrapper").replaceWith($newContent);

        };
    });

});
}); 

I’m new to jQuery and may be doing this entirely the wrong way, but I’m completely stumped at this point as to how to get the same script re-applied to the newly loaded AJAX div…

Answer 1

jQuery load has a callback parameter that you can use to rebind your hoverwords functionality to the newly-added DOM elements. You’ll want to use the callback handler so that you don’t try to add the hoverwords to the DOM before your new content has been loaded:

 var $newContent = 
     $('<div id="contentWrapper" />')
         .load(pageName + extension + ' #contentWrapper > *', function() {

          // bind the hoverwords on the new content inserted in the DIV
          $("#contentWrapper").find(".animations a").hoverwords();

      });

Also, I’m not 100% sure that load returns anything to $newContent. This should be processed by the actual callback handler and added to the DIV#contentWrapper once the content is downloaded. There are more examples of jQuery load in action on the jQuery site.