Jquery $（'img'）。load（）事件在使用ajax加载图片时不会触发

Question

高我正在制作图片库，您可以通过AJAX加载图片。

我有一个fadeIn效果使用下面的代码。

$('img').load(function() { 
     $(this).fadeIn(); 
}); 

这项工作的第一组图像（这是加载了页面），但是当我通过AJAX调用更多的（见下面的代码）的$('img').load()似乎没有了跳跳虎。

$('#clickme').click(function(){ 
     $('.tile').fadeOut(); 
      $.post('http://localhost/wp-admin/admin-ajax.php',{ 
        'action' : 'da_ajax_posts', 
        'data' : 'foobarid' 
       },(function($data){ 
       $('#container').html($data); 


    })); 

这是我的代码的其余部分：

<div id="container"> 
     <div class="tile w2 h2 t1 l1"> 
      <h2>Image10</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=385&amp;h=256&amp;src=http://localhost/wp-content/uploads/2012/07/img10.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w1 h2 t1 l3"> 
      <h2>image9</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=256&amp;src=http://localhost/wp-content/uploads/2012/07/Chrysanthemum.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w2 h1 t1 l4"> 
      <h2>Image8</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=385&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Desert.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w2 h2 t2 l4"> 
      <h2>image7</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=385&amp;h=256&amp;src=http://localhost/wp-content/uploads/2012/07/Hydrangeas.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w1 h1 t3 l1"> 
      <h2>Image6</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/img10.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w1 h1 t4 l1"> 
      <h2>image 5</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Jellyfish.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w1 h2 t3 l2"> 
      <h2>Image4</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=256&amp;src=http://localhost/wp-content/uploads/2012/07/Koala.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w1 h1 t3 l3"> 
      <h2>Image3</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Lighthouse.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w1 h1 t4 l5"> 
      <h2>Image2</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=190&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Tulips.jpg"> 
      <p></p> 
     </div> 


     <div class="tile w2 h1 t4 l3"> 
      <h2>Image1</h2> 
      <img src="/wp-content/themes/site/images/tim.php?w=385&amp;h=146&amp;src=http://localhost/wp-content/uploads/2012/07/Penguins.jpg"> 
      <p></p> 
     </div> 


</div>  

提前非常感谢。

Answer 1

你应该在Ajax回调再次绑定此事件。 （$ data）;“（$ data）;”}（“＃container”）。在这行后面写下以下代码：

$('img').load(function() { 
    $(this).fadeIn(); 
}); 

Answer 2

您需要现场定义加载事件：

$('img').live("load", function() { 
    $(this).fadeIn(); 
}); 

Answer 3

live现在已经过时，看到on进行更换：http://api.jquery.com/on/

中庸之道像live，它的目标是绑定的事件处理程序也将被触发元素没有当您第一次存在绑定它。

以类似于OP的情况下，你想要的是：

// binding the event to the body but restricting its scope to img tags 
$('body').on('load', 'img', function() { 
    $(this).fadeIn(); 
});