[英]jQuery pop-up not working on page with infinite scrolling
I've got a website I'm working with that has a set of products (image only at first) and when you hover-over them it will present a pop-up with the item details, buy now button, etc. 我有一个正在使用的网站,该网站上有一组产品(最初只有图像),当您将鼠标悬停在它们上面时,它将显示一个弹出窗口,其中包含项目详细信息,“立即购买”按钮等。
This all works great except when you scroll down and the infinite scrolling kicks in and loads another set of products, even with the correct javascript and css as the non-infinite products above it, it will not present the pop-up. 这一切都很好,除了当您向下滚动并无限滚动进入并加载另一组产品时,即使使用正确的javascript和css作为其上方的非无限产品,它也不会显示弹出窗口。
What I've tried to resolve this issue: 我试图解决此问题的方法:
The code I am using for the pop-up is: 我用于弹出窗口的代码是:
var hideTimer = null;
var hoverElem = null;
function openFbox() {
$(this).attr('href', $(this).find('.quickview').attr('href'));
$.facebox({ div: $(this).attr('href') });
}
function closeFbox() {
if (hoverElem != 'facebox_overlay') {
// do nothing
} else {
hideTimer = setTimeout(function() {
if (hoverElem == 'facebox_overlay')
closeIt();
}, 750);
}
}
$(".thumbnail")
.hoverIntent({
sensitivity: 7,
interval:400,
timeout:0,
over: openFbox,
out: closeFbox
});
The code for the infinite scrolling is: https://gist.github.com/rickydazla/1390610 无限滚动的代码是: https : //gist.github.com/rickydazla/1390610
When you attatch the hover listener, you need to use the jQuery method .on(). 吸引悬停侦听器时,您需要使用jQuery方法.on()。 This will attach the listener to a permanent element in the DOM, but wait for the action on the specified children.
这会将侦听器附加到DOM中的一个永久元素,但是要等待对指定子项执行的操作。
$("parentElementSelector").on("mouseenter", "targetSelector", function() {
$(this).attr('href', $(this).find('.quickview').attr('href'));
$.facebox({ div: $(this).attr('href') });
}).on("mouseleave", "targetSelector", function() {
if (hoverElem != 'facebox_overlay') {
// do nothing
} else {
hideTimer = setTimeout(function() {
if (hoverElem == 'facebox_overlay')
closeIt();
}, 750);
}
});
The parent could be the body and the targets would be .thumbnail 父对象可以是身体,目标可以是.thumbnail
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.