在AJAX页面更新后重新初始化jQuery插件 [英] Reinitialize jQuery plugin after AJAX page update
问题描述
我在主页上有一个图像轮播。为了呈现它我使用Jquerytools(可滚动+导航器)
I have an image carousel in home page. To render it i use Jquerytools ( scrollable+navigator )
我以这种方式触发jQuery初始化程序脚本:
I trigger the jQuery initializer script in this way:
$(window).load(function(){
$("#today-news-carousel").scrollable({ vertical: true, mousewheel: true }).navigator({ navi: '#today-news-navigator' });
});
此轮播的内容可以通过AJAX调用进行更新。
拨打此电话后,我需要重新初始化此轮播。
这里是调用AJAX的函数:
The content of this carousel can be updated by AJAX call. After this call i need to reinitialize this carousel. Here the function that makes AJAX call:
$(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' });
}
});
}
});
我尝试重新初始化插件但是我在控制台中出现以下错误:
in the "complete" callback function i try to reinitialize the plugin but i have the following error in console:
TypeError: $(...).scrollable(...).navigator is not a function
.navigator({ navi: '#today-news-navigator' });
我无法理解为什么当我加载页面时它正常工作,当我重新初始化它似乎找不到它.navigator方法...
I cannot understand why it works correctly when i load the page and when i reinitialize it seems it cannot find .navigator method...
推荐答案
感谢Archer的帮助我找到了解决方案。
重新初始化插件的脚本必须位于fadeIn()回调中。
这里的工作代码:
Thank to the help of a Archer i found the solution. The script to reinitialize the plugin had to be located in the fadeIn() callback. Here the working code:
$(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' });
});
});
},
});
}
});
这篇关于在AJAX页面更新后重新初始化jQuery插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!