[英]Reinitialize jQuery plugin after AJAX page update
我的主頁上有一個圖像輪播。 要渲染它,我使用Jquerytools(scrollable + navigator)
我以這種方式觸發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方法...
感謝弓箭手的幫助,我找到了解決方案。 重新初始化插件的腳本必須位於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' });
});
});
},
});
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.