1

我使用 Paul Irish 的 masonry 和无限滚动在我的页面上加载额外的内容。此内容具有以下标记：

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

});
});

但是无限滚动后加载的额外内容，我无法执行mouseover. 如何设置 javascript，以便它也加载到无限滚动后显示的内容上？

4

2 回答 2

2 
$("#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

于 2013-01-04T20:07:55.233 回答
0

solved it:

    $(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);
    });
于 2013-01-04T20:29:13.207 回答