jQuery弹出窗口不适用于无限滚动的页面

Question

我有一个正在使用的网站，该网站上有一组产品（最初只有图像），当您将鼠标悬停在它们上面时，它将显示一个弹出窗口，其中包含项目详细信息，“立即购买”按钮等。

这一切都很好，除了当您向下滚动并无限滚动进入并加载另一组产品时，即使使用正确的javascript和css作为其上方的非无限产品，它也不会显示弹出窗口。

我试图解决此问题的方法：

• 在调整窗口大小时将调用移至jQuery调用
• 移动电话接入hoverIntent（jQuery插件- http://cherne.net/brian/resources/jquery.hoverIntent.html ）
• 如果加载的数量超过最初的20种产品，则只有在通过滚动到初始产品集下方激活“无限滚动”后，才会出现此问题。

我用于弹出窗口的代码是：

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

无限滚动的代码是： https : //gist.github.com/rickydazla/1390610

Answer 1

吸引悬停侦听器时，您需要使用jQuery方法.on（）。 这会将侦听器附加到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); 
    }
});

父对象可以是身体，目标可以是.thumbnail