Question

我有一个我正在使用的网站，其中包含一组产品（仅限图像），当您将它们悬停在它们上面时，它会弹出一个包含项目详细信息，立即购买按钮等的弹出窗口

这一切都很有效，除非你向下滚动并且无限滚动开始并加载另一组产品，即使使用正确的javascript和css作为其上方的非无限产品，它也不会显示弹出窗口。

我试图解决此问题：

在调整窗口大小
将调用移至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

jQuery弹出窗口无法在无限滚动的页面上工作

1 个答案: