jQuery pop-up not working on page with infinite scrolling

Question

I've got a website I'm working with that has a set of products (image only at first) and when you hover-over them it will present a pop-up with the item details, buy now button, etc.

This all works great except when you scroll down and the infinite scrolling kicks in and loads another set of products, even with the correct javascript and css as the non-infinite products above it, it will not present the pop-up.

What I've tried to resolve this issue:

• Moved calls to a jQuery call on resize of window
• Moved calls into a hoverIntent (jQuery plugin - http://cherne.net/brian/resources/jquery.hoverIntent.html )
• If loading more than the initial 20 products the issue only occurs once the "infinite scrolling" is activated by scrolling below the initial set of products.

The code I am using for the pop-up is:

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

The code for the infinite scrolling is: https://gist.github.com/rickydazla/1390610

Answer 1

When you attatch the hover listener, you need to use the jQuery method .on(). This will attach the listener to a permanent element in the DOM, but wait for the action on the specified children.

$("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); 
    }
});

The parent could be the body and the targets would be .thumbnail