AJAX頁面更新後重新初始化jQuery插件

Question

我在主頁中有一個圖像傳送帶。爲了使其我使用Jquerytools（滾動+導航）

我觸發jQuery的初始化腳本，以這樣的方式

$(window).load(function(){ 
    $("#today-news-carousel").scrollable({ vertical: true, mousewheel: true }).navigator({ navi: '#today-news-navigator' }); 

}); 

這個旋轉木馬的內容可以通過AJAX調用更新。 在這個調用之後，我需要重新初始化這個傳送帶。 這使得AJAX調用的函數：

$(document).on('click', '.nav-highlight', function() { 

     var requestDateArray = $(this).attr('data-thedate').split('-'); 
     var d = new Date(); 
     var requestedDate = new Date(requestDateArray[0], (requestDateArray[1]-1), requestDateArray[2]); 
     var today = new Date(d.getFullYear(), d.getMonth(), d.getDate()); 
     if (requestedDate > today) { 
      return 
     }else { 
     $.ajax({ 
      type: "POST", 
      url: templateDir+'/highlight-news-navigator.php', 
      context: this, 
      dataType: "html", 
      data: { date: $(this).attr('data-thedate') }, 
      beforeSend: function(){ 
      }, 
      success: function(data) { 
      $('.today-news').fadeOut('fast', function(){ 
       $(this).empty().html(data).fadeIn('fast'); 
      }); 
      }, 
      complete: function(){ 
      $("#today-news-carousel").scrollable({ vertical: true, mousewheel: true }) 
      .navigator({ navi: '#today-news-navigator' }); 
      } 
     }); 

     } 

    }); 

在「完整」的回調函數我嘗試重新初始化插件，但我有以下錯誤控制檯：

TypeError: $(...).scrollable(...).navigator is not a function 
.navigator({ navi: '#today-news-navigator' }); 

我不明白爲什麼它正常工作時，我加載頁面，當我重新初始化它似乎找不到.navigator方法...

Answer 1

感謝弓箭手的幫助，我找到了解決方案。 重新初始化插件的腳本必須位於fadeIn（）回調中。 這裏的工作代碼：

$(document).on('click', '.nav-highlight', function() { 

     var requestDateArray = $(this).attr('data-thedate').split('-'); 
     var d = new Date(); 
     var requestedDate = new Date(requestDateArray[0], (requestDateArray[1]-1), requestDateArray[2]); 
     var today = new Date(d.getFullYear(), d.getMonth(), d.getDate()); 
     if (requestedDate > today) { 
      return 
     }else { 
     $.ajax({ 
      type: "POST", 
      url: templateDir+'/highlight-news-navigator.php', 
      context: this, 
      dataType: "html", 
      data: { date: $(this).attr('data-thedate') }, 
      beforeSend: function(){ 
      }, 
      success: function(data) { 
      $('.today-news').fadeOut('fast', function(){ 
       $(this).empty().html(data).fadeIn('fast', function(){ 
       $("#today-news-carousel").scrollable({ vertical: true, mousewheel: true }).navigator({ navi: '#today-news-navigator' }); 
       }); 
      }); 
      }, 
     }); 

     } 

    });