1

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...

4

2 に答える 2

0

jQuery loadには、ホバーワード機能を新しく追加されたDOM要素に再バインドするために使用できるコールバックパラメーターがあります。新しいコンテンツが読み込まれる前にホバーワードをDOMに追加しようとしないように、コールバックハンドラーを使用することをお勧めします。

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

      });

また、loadが$ newContentに何かを返すかどうかは100％わかりません。これは、実際のコールバックハンドラーによって処理され、コンテンツがダウンロードされたらDIV＃contentWrapperに追加される必要があります。jQueryサイトで実際に実行されているjQueryロードの例は他にもあります。

于 2012-05-12T23:04:25.620 に答える
0

Maybe I've understood the question wrong, but you probably want to use live instead of load.

http://api.jquery.com/live/

edit: Sorry, my bad. I would try just running 

$("#contentWrapper").hoverwords()  // or $("#contentWrapper a").hoverwords()

again after you've replaced the content, but I'm going to stop guessing now. Sorry for the confusion.

于 2012-05-12T22:56:34.483 に答える