Javascript 在AJAX页面更新后重新初始化jQuery插件

我在主页上有一个图像转盘。要渲染它，我使用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' });   
          }
        });

      }

  });

在“complete”回调函数中，我尝试重新初始化插件，但控制台中出现以下错误：

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

---

我无法理解为什么当我加载页面时，以及当我重新初始化时，它似乎无法找到。navigator方法…

感谢Archer的帮助，我找到了解决方案。 重新初始化插件的脚本必须位于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' });   
              });
            });
          },
        });

      }

  });

---

是否有理由将重新初始化代码放入

complete

，而不是

success

？它更适合于

fadeIn（）

回调。没有承诺，但值得一试。谢谢！！！我整个下午都在讨论这个问题！把它放在fadeIn回调中效果很好！再次感谢你！。。。或者代替

$.ajax（{}）.done

？你能将其作为一个答案发布，这样就不会出现未回答的问题了吗？这样的讨论将我引向了正确的方向——当使用JQuery分离/重新附加元素时，你必须在任何动画完成时重新初始化任何插件。