Question

我使用Paul Irish的砌体和infinitescroll在我的页面上加载额外的内容。此内容具有以下标记：

                     <div class="wrdLatest" id="<?=$row['item_id']?>">
                <div class="item_300_wrapper">
                    <div class="item_300_image">
                        <a class="<? if($_SESSION['login'] && $_SESSION['active'] == 1) { ?>item_popup<? }elseif($_SESSION['login'] && $_SESSION['active'] == 0){?>activate_popup<? } else { ?>signup_popup<? }?>" href="popup.php?id=<?=$row['item_id']?>"><img src="http://www.itemmized.com/<?=$row['item_pic']?>" class="img_300" alt="<?=$row['item_title']?>" /></a>
                        <div class="item_300_description">
                            <p class="title"><?=$row['item_title']?></p><p class="poster">by <?=$row['user_name']?></p>
                            <div class="item_poster<? if($length > 26) {?>_big<? } ?>"><a href="profile.php?id=<?=$row['user_id']?>" <? if(empty($_SESSION['login'])) { ?>class="signup_popup1"<? } ?>><img src="<?=$row['user_pic']?>" class="img_poster" alt="<?=$row['user_name']?>" /></a></div>
                        </div>
                    <div class="ribbon r_<?=$row['item_category']?>"></div>
                    </div>
                </div>
                </div>

如您所见，有一个班级item_300_description。此类包含在类mouseover上item_300_image上淡入和淡出的说明。这是通过以下js脚本完成的：

$(document).ready(function() {

    $(".item_300_image").on({
    mouseenter: function(){
        $(this).children('.item_300_description').stop().fadeTo(500, 1);
},
    mouseleave: function(){
        $(this).children('.item_300_description').stop().fadeTo(500, 0);
}

});
});

但是在infinitescroll之后加载的额外内容，我无法执行mouseover。如何设置javascript，以便它也加载到infinitescroll之后显示的内容？

Answer 1

$("#SomeParentID").on('mouseenter mouseleave', '.item_300_image', function( e ) {
    var opacity = e.type=='mouseenter' ? 1 : 0 ;
    $(this).find('.item_300_description').stop().fadeTo(500, opacity );
});

http://api.jquery.com/on/#direct-and-delegated-events

Answer 2

解决了它：

    $(document).on("mouseenter", ".item_300_image" , function() {
        $(this).children('.item_300_description').stop().fadeTo(500, 1);
    });

    $(document).on("mouseleave", ".item_300_image" , function() {
        $(this).children('.item_300_description').stop().fadeTo(500, 0);
    });

淡入和淡出不适用于无限滚动后加载的内容

2 个答案: