Hover problem : Item are been loading but hover dont work on this

[OctavDesign]

Hi, Infinite scroll work but on the new items (loaded after scroll), the hover effect dont work ! Can you help me please ?

the page : https://octavdesign.tumblr.com/tagged/restaurants

The html code : <article data-tags="all restaurants" data-postid="611645184704462848" class="post ft-section has-caption photo">

On hover : <article data-tags="all restaurants" data-postid="611645184704462848" class="post ft-section has-caption photo hover">

After scrolling and load all posts, the class "hover" is dont added on posts are loading

JS (from theme.js) function() { var e = t(".post"); !1 === m && (e.on("click", function() { t(this).toggleClass("hover") }), e.hover(function() { t(this).addClass("hover") }, function() { t(this).removeClass("hover") })) }(),

JS (on html)

<script type="text/javascript"> $(document).ready(function(){ /*Masonry init */ var container = document.querySelector('#posts'); var msnry = new Masonry( container, { itemSelector: '.post', columnWidth: '.post' , percentPosition: true }); var imgLoad = new imagesLoaded( container, { itemSelector: '.post', } ); var infScroll = new InfiniteScroll( container, { navSelector : '#pagination', // selector for the paged navigation nextSelector : '#pagination a', // selector for the NEXT link (to page 2) itemSelector : '.post', // selector for all items you'll retrieve loading: { finishedMsg: 'No more pages to load.', img: 'http://i.imgur.com/6RMhx.gif' }, path: '#pagination a', // hack append: '.post', outlayer: msnry , status: '.loading-status', scrollThreshold: 700, loadOnScroll:true, // disable loading history: false, }, function( newElements ) { // hide new items while they are loading var $newElems = $( newElements ).css({ opacity: 0 }); // ensure that images load before adding to masonry layout $newElems.imagesLoaded(function(){ // show elems now they're ready $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); }); setTimeout(function(){ msnry.layout(); }, 3000); setInterval(function(){ msnry.layout(); }, 1000); }); </script>

[quoid]

This doesn't seem related to infinite-scroll, but rather your javascript code.

I'd guess it has to do with using .hover on dynamic elements, see this stackoverflow issue.