Question

我的主页上有一个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。 ..

Answer 1

也许我已经理解了这个问题，但你可能想要使用live而不是load。

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

编辑：对不起这是我的错。我会尝试运行

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

在你替换内容之后再次

，但我现在要停止猜测了。对不起，感到困惑。

Answer 2

jQuery load有一个回调参数，您可以使用该参数将hoverwords功能重新绑定到新添加的DOM元素。您将需要使用回调处理程序，以便在加载新内容之前不要尝试将hoverwords添加到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％确定加载会向$ newContent返回任何内容。这应该由实际的回调处理程序处理，并在下载内容后添加到DIV＃contentWrapper。在jQuery站点上有更多jQuery load的实例。

在AJAX加载中替换div后重新加载动画脚本？

2 个答案: