javascript - jQuery pop-up not working on page with infinite scrolling -


i've got website i'm working has set of products (image @ first) , when hover-over them present pop-up item details, buy button, etc.

this works great except when scroll down , infinite scrolling kicks in , loads set of products, correct javascript , css non-infinite products above it, not present pop-up.

what i've tried resolve issue:

the code using 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') {       // 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 infinite scrolling is: https://gist.github.com/rickydazla/1390610

when attatch hover listener, need use jquery method .on(). attach listener permanent element in dom, wait action on 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') {       // nothing     } else {       hidetimer = settimeout(function() {         if (hoverelem == 'facebox_overlay')             closeit();       }, 750);      } }); 

the parent body , targets .thumbnail


Comments

Popular posts from this blog

how to proxy from https to http with lighttpd -

android - Automated my builds -

python - Flask migration error -