[英]Previous divs with jQuery does not work after Ajax call
I have two scripts: 我有两个脚本:
Here is my code: 这是我的代码:
function slider () {
var $arrows = $('.arrows');
var $next = $arrows.children(".slick-next");
var $prev = $arrows.children(".slick-prev");
var slick = $('.your-class').slick({
appendArrows: $arrows
});
$('.slick-next').on('click', function (e) {
var i = $next.index( this )
slick.eq(i).slickNext();
});
$('.slick-prev').on('click', function (e) {
var i = $prev.index( this )
slick.eq(i).slickPrev();
});
}
$(document).ajaxComplete(slider);
Below is the scroll content load with Ajax: 以下是使用Ajax加载滚动内容:
$(document).ready(function(){
function slider () {
var $arrows = $('.arrows');
var $next = $arrows.children(".slick-next");
var $prev = $arrows.children(".slick-prev");
var slick = $('.your-class').slick({
appendArrows: $arrows
});
$('.slick-next').on('click', function (e) {
var i = $next.index( this )
slick.eq(i).slickNext();
});
$('.slick-prev').on('click', function (e) {
var i = $prev.index( this )
slick.eq(i).slickPrev();
});
}
$(document).ajaxComplete(slider);
var flag = 0;
$.ajax({
type: "GET",
url: "getdata.php",
data: {
'offset': 0,
'limit': 10
},
success: function(data){
$('.rowmasonry').append(data);
flag += 10;
},
});
$(window).scroll(function(){
if($(window).scrollTop() >= $(document).height() - $(window).height()-500){
$.ajax({
type: "GET",
url: "getdata.php",
data: {
'offset': flag,
'limit': 10
},
success: function(data){
$('.rowmasonry').append(data);
flag += 10;
},
});
}
});
});
The problem is that the first 10 contents that are loaded work properly. 问题在于前十个已加载的内容正常工作。 However, as I scroll down, and another 10 contents come, the first 10 contents that were loaded do not respond. 但是,当我向下滚动时,又有10个内容出现,加载的前10个内容没有响应。
How do I bind the image slider to Ajax, so that all contents on the page work with jQuery? 如何将图像滑块绑定到Ajax,以便页面上的所有内容都可以使用jQuery?
Thanks for your help. 谢谢你的帮助。
You are just appending new elements to DOM. 您只是将新元素添加到DOM。 In order to update slick you need to reInit slick carousel or if you are sure about the slide markup then you can use slickAdd
method provided by plugin. 为了更新滑动条,您需要重新启动滑动条传送带,或者如果您确定幻灯片标记正确,则可以使用插件提供的slickAdd
方法。
$.ajax().done(function(data){ $('.your-class').slick('slickAdd', data); });
ref: http://kenwheeler.github.io/slick/ 参考: http : //kenwheeler.github.io/slick/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.