淡入和淡出不適用於無限滾動後加載的內容

我使用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。此課程包含一個描述，其類別item_300_image上的mouseover淡入淡出。這與下面的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後顯示的內容上？

來源

2013-01-04 Stefan Bakker

$("#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-04 20:07:55

我怕'mouseenter'和'mouseleave'不會泡泡（打破代表團），但他們似乎jQuery中（對應DOM事件不）。你可以做小提琴嗎？ –

@JanDvorak當然。在我的路上 –

@JanDvorak http://jsbin.com/ifavom/1/edit在演示中懸停'WRAPPER' –

解決它：

$(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-04 20:29:13

好吧，這很尷尬，我給你的答案相當完全一樣...... –

道具爲你解決！ –

淡入和淡出不適用於無限滾動後加載的內容

回答

相關問題