無限滾動 - jQuery將不會在新提取的元素

Question

基本上我實現我的WordPress博客的無限滾動域名（.com）和在這裏工作的代碼：

HTML

<div id="photos" class="display-fix"> 
    <?php while (have_posts()) : the_post(); ?> 
    <img src="<?php $url = get_post_thumbnail_id(); $url = wp_get_attachment_image_src($url,'medium'); $url = $url[0]; echo $url; ?>">  
    <?php endwhile; ?> 
</div> 
<div id="pagination" class="clear right">   
    <?php if(function_exists('wpex_pagination')) { wpex_pagination(); } ?> 
</div> 

JS

$('#photos').infinitescroll({ 
    navSelector : ".next:last", // selector for the paged navigation (it will be hidden) 
    nextSelector : "a.next:last", // selector for the NEXT link (to page 2) 
    itemSelector : "#photos img", // selector for all items you'll retrieve 
    loading: { 
     finished: undefined, 
     finishedMsg: '', 
     img: "<?php echo get_template_directory_uri(); ?>/images/preloader.gif", 
     msg: null, 
     msgText: '', 
     selector: null, 
     speed: 'slow', 
     start: undefined 
    } 
}); 

$('#photos img').hover(function(){ 
    alert('Works'); 
}); 

CSS

#photos { 
    width: 100%; 
    padding: 20px; 
} 
#photos img { 
    width: 504px; 
    margin: 3px; 
    float: left; 
} 
#infscr-loading { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    left: 50%; 
    margin-left: -50px; 
    bottom: 10px; 
} 
#infscr-loading img { 
    width: 100px; 
    height: 100px; 
} 

發生什麼事是，當我向下滾動圖像時彈出，懸停警報不起作用，它只適用於顯示的第一個圖像！那些彈出的不起作用。

任何原因爲什麼？我正在使用$(document).ready(function() {我應該使用其他東西嗎？

Answer 1

這是因爲懸停事件附加到最初可見的元素，只是處理的infinitescroll成品事件：

$('#photos').infinitescroll({ 
    navSelector : ".next:last", // selector for the paged navigation (it will be hidden) 
    nextSelector : "a.next:last", // selector for the NEXT link (to page 2) 
    itemSelector : "#photos img", // selector for all items you'll retrieve 
    loading: { 
     finished: registerHover, 
     finishedMsg: '', 
     img: "<?php echo get_template_directory_uri(); ?>/images/preloader.gif", 
     msg: null, 
     msgText: '', 
     selector: null, 
     speed: 'slow', 
     start: undefined 
    } 
}); 

registerHover(); 

function registerHover() 
{ 
    $('#photos img').hover(function(){ 
     alert('Works'); 
    }); 
} 

Answer 2

您需要使用授權。

變化：

$('#photos img').hover(function(){ 
    alert('Works'); 
}); 

到

$('#photos img').on('mouseover', function(){ 
    alert('Works'); 
});