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