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