Jquery $('img').load() 事件在使用 ajax 加载图像时不会触发

Question

>High 我正在制作一个图像库，您可以在其中通过 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 回调中再次绑定此事件。

在此行"$（'#container'）.html（$data）;"之后编写以下代码

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

Answer 2

您需要使用 live 定义加载事件：

$('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();
});