1

我的主页上有一个 div，它使用一个名为 hoverwords 的 jQuery 插件为 div 内的一些链接创建翻转动画，如下所示：

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

它使用以下脚本在首次加载时很好地加载插件：

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

然后，如果启用了 JavaScript，我将使用 AJAX 从我的其他页面异步加载内容。其他一些页面使用相同的 hoverwords 插件，我很难重新加载脚本，因为它没有被调用为我可能使用 .on() 或 .live() 绑定的事件。以下是我如何使用 jQuery 动画加载新内容以隐藏页面，然后在通过 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);

        };
    });

});
});

我是 jQuery 新手，可能以完全错误的方式执行此操作，但此时我完全不知道如何将相同的脚本重新应用于新加载的 AJAX div ...

4

2 回答 2

0

jQuery load 有一个回调参数，您可以使用该参数将您的 hoverwords 功能重新绑定到新添加的 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();

      });

另外，我不能 100% 确定 load 会返回任何东西给 $newContent。这应该由实际的回调处理程序处理，并在下载内容后添加到 DIV#contentWrapper。jQuery 网站上有更多jQuery 加载示例。

于 2012-05-12T23:04:25.620 回答
0

也许我对问题的理解是错误的，但您可能想使用 live 而不是 load。

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

编辑：对不起，我的错。我会尝试跑步

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

在您替换内容后再次，但我现在停止猜测。对困惑感到抱歉。

于 2012-05-12T22:56:34.483 回答