我有一个加载了 jQuery 内容的页面,其中一个 div 将是一个 slider
$('#slides').slides({
preload: true,
preloadImage: 'img/loading.gif',
play: 6000,
pause: 2500,
hoverPause: true,
slideSpeed: 1000,
animationStart: function(current){
$('.caption').animate({
bottom:-35
},100);
},
animationComplete: function(current){
$('.caption').animate({
bottom:0
},200);
},
slidesLoaded: function() {
$('.caption').animate({
bottom:0
},200);
}
});
});
现在,html 的结构如下:
<div id"content">
<div id="slider"></div>
</div>
我已经使用 jquery 设置了我的页面,当用户单击链接时,它将将该页面的内容加载到 #content
var homepage = $("#content").html();
$("#content").load("myContent.html");
如果用户回到家,只需:
$("#content").html(homepage);
但是 $('#slides').slides();
不再起作用了。
我该如何解决这个问题?
最佳答案
您可以使用 .load()
中的 complete
来检查您的内容中是否包含 #slider
。如果是,请再次初始化您的 slides
插件。
var homepage = $('#content'),
options = {
generateNextPrev: true,
play: 1000
};
$('#slides').slides(options);
// Button click or something
$('#content').load('myContent.html', function(response, status, xhr) {
if ($(response).find('#slider').length > 0) {
$('#slides').slides(options);
}
});
编辑:
我正在制作一个 jsfiddle 来演示它,但是 jsfiddle 有服务器问题,所以我做了一个 codepen 演示。 http://codepen.io/Vestride/pen/LicKd .再次调用插件对我有用(尽管我只是通过用 .html()
替换内容来模拟 ajax 请求)。
关于javascript - 当我在 jquery 中修改 HTML 时如何刷新对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11516342/