我使用Paul Irish的砌体和infinitesscroll来加载我的页面上的额外内容。该内容具有以下标记:
<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);
}
});
});
但是在无限滚动后加载的额外内容，我无法执行mouseover。我怎样才能设置javascript，使它也加载在无限滚动后显示的内容上?
$("#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
解决了:
$(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);
});