jquery - 将 jquery 应用于以无限滚动调用的元素

Question

我有一个帖子循环，我使用 jquery 悬停功能来扩展元素。我的问题是它仅适用于最初在页面加载时显示的元素，并且对于附加无限滚动的任何内容都失败。

这是我用来展开框的脚本

$(document).ready(function() {
  $('.box').hover( function() {
       var height = $(this).children('.box-info').height();
       var newHeight = (height + 12);
       $(this).children('.box-image').css('top', -newHeight);
   }, function() {
       $(this).children('.box-image').css('top', 0);
  });
});

然后我有一个循环，然后是一个脚本来激活无限滚动

var href = 'first';
$(document).ready(function() {
 $('#boxes').infinitescroll({
    navSelector: '.infinitescroll',
    nextSelector: '.infinitescroll a',
    itemSelector: '#boxes .box',
    loadingImg: '<?php echo get_bloginfo('stylesheet_directory') ?>/images/loading.gif',
    loadingText: 'Loading...',
    donetext: 'No more pages to load.',
    debug: false
}, function(arrayOfNewElems) {
    $('#boxes').masonry('appended', $(arrayOfNewElems));
    if(href != $('.infinitescroll a').attr('href')) {
        href = $('.infinitescroll a').attr('href');
    }
 });
});

我究竟做错了什么？

Answer 1

根据您提供的小提琴：

HOVER不适用于绝对定位的元素和动画

您可以使用“mouseenter”和“mouseleave”事件代替悬停，当子元素妨碍时不会触发：

根据聊天，请参阅此更新链接 http://jsfiddle.net/Gm7Xb/11/