在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' }); } }); } }); 

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

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

我无法理解为什么它在我加载页面时正常工作，当我重新初始化它似乎无法找到.navigator方法…

Answer 1

感谢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' }); }); }); }, }); } });