我的jquery动画在ajax调用后不起作用

Question

我正在尝试使我的动画在进行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>

Answer 1

据我所知，您有一个立即调用的函数表达式：

(function() {

})();

您放入其中的每个变量和函数声明（例如showNextQuote() ）都无法从其外部的其他函数访问。

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

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

另一件事是您的var quotes = $(".quoteName"); 选择器可能没有结果，因为DOM还没有准备好被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

Answer 2

看起来，当您进行AJAX调用时，您进行了更新（这意味着删除引号对象中包含的当前DOM节点并创建新的DOM节点）。 如果执行此操作，则当删除引号对象中的节点时，将不会发生任何事情，因为它们不再属于您看到的DOM。 jQuery对象没有“实时更新”，它们不会更改以反映DOM中的更改。 您需要做的是在AJAX请求完成后再次进行此调用，以更新quotes对象：

quotes = $('.quoteName');

当然，您的“ quotes”对象不是全局的，因此，如果您的AJAX调用不在您定义已发布代码的匿名函数的范围之内，则可能无法更新它。