1

私はPaulIrishの石積みと無限スクロールを使用して、ページに追加のコンテンツをロードしています。このコンテンツには次のマークアップがあります。

                     <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

それを解決しました：

    $(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 に答える