我的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調用不在您定義已發布代碼的匿名函數的范圍之內，則可能無法更新它。