javascript - 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