jquery网页刷新后控件失效_在AJAX页面更新后重新初始化jQuery插件

I have an image carousel in home page. To render it i use Jquerytools ( scrollable+navigator )

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

});

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

I cannot understand why it works correctly when i load the page and when i reinitialize it seems it cannot find .navigator method...

解决方案

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

});

});

},

});

}

});