在jjax调用之后,我的jquery动画不起作用

时间:2014-03-02 11:18:45

标签: javascript jquery html ajax

我正在尝试在ajax调用完成后让我的动画继续工作。当用户登陆页面时,它工作正常。但是如果用户导航回到首页,则动画将不会运行。我对Jquery很新,你能给我一些提示吗?

我认为它与.on有关,但我不确定语法是否如此。任何帮助将不胜感激。

这是代码:

<script type="text/javascript">
(function() {

    var quotes = $(".quoteName");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(3000)
            .delay(12000)
            .fadeOut(3000, showNextQuote);
    }
    showNextQuote();
})();
</script>

2 个答案:

答案 0 :(得分:0)

据我所知,你有一个立即调用的函数表达式:

(function() {

})();

您放入的每个变量和函数声明(如showNextQuote())将无法从其他函数中访问。

(function() {
    function showNextQuote(arg) {
         alert( arg );
    }
    showNextQuote('A');
})();

showNextQuote('B'); // ReferenceError: showNextQuote is not defined

另一个原因是你的var quotes = $(".quoteName");选择器可能没有结果,因为JS还没有准备好被JS解析,并且jQuery可以捕获你的元素。

jQuery( function($) { // DOM is now ready and the $ alias secured.

    var quotes = $(".quoteName"); 
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length).fadeIn(3000).delay(12000)
                                          .fadeOut(3000, showNextQuote);
    }
    showNextQuote();

    // other functions here

    $('selector').on('some event', 'dynamicSelector', function(){
          showNextQuote(); // will work
          // other stuff here?...
    });

});

另一个提示是,如果使用新元素填充DOM,可能需要重新捕获它们以更新quotes.length

答案 1 :(得分:0)

看来,当你进行AJAX调用时,你会更新(我的意思是删除引号对象中包含的当前DOM节点并创建新的节点)。如果你这样做,当你对引号对象中的节点进行anitame时,什么都不会发生,因为它们不再属于你所看到的DOM。 jQuery对象没有“实时更新”,它们不会更改以反映DOM中的更改。 您需要的是在AJAX请求完成后再次进行此调用,以更新引号对象:

quotes = $('.quoteName');

当然,你的'quotes'对象不是全局的,所以如果你的AJAX调用不在你定义你发布的代码的匿名函数的范围内,你可能无法更新它。 / p>