jQuery刷新停止jQuery悬停工作

Question

I'm using the script below to refresh a div when the text 'view more' is clicked. The div loads a bunch of random images from the rotate.php file. For some reason though, the jquery hover effects that I have applied no longer work after the div has been refreshed. I did try adding the jquery hover script to the rotate.php file, but that stops the refresh script from working... :S Does anyone have any ideas on how you could fix this? :)

<div class="headingtext">
<script type='text/javascript'>
$(function() {
  $("#refresh").click(function(evt) {
     $(".feature").load("rotate.php")
     evt.preventDefault();
  })
})
</script><a id="refresh" href="#">View More</a>
        </div>

        <div class="feature">
            <?php include('rotate.php') ?>
        </div>

The jquery I have applied to the images, but stops working after refresh:

 $(document).ready(function(){
 $(".feature img").hover(function() {
  $(this).stop().animate({opacity: "0.5"}, 'slow');
},
function() {
  $(this).stop().animate({opacity: "1"}, 'slow');
});
});

The PHP (rotate.php):

<?php 
$random = "random.txt";
$fp = file($random);
shuffle($fp);
$keys = array_rand($fp, 3);
for ($i = 0; $i < 3; $i++):
$rl = $fp[$keys[$i]]; 
echo $rl;
endfor;
?>

Answer 1

You must use the on function ( http://api.jquery.com/on/ )

replace :

 $(".feature img").hover(function() {

by

$(".feature img").on("mouseover", function() {