Jquery$（'；img'；）.load（）事件不'；使用ajax加载图像时不会触发

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>     

图像10

图9

图8

图7

图6

图5

图4

图3

图2

图1

---

非常感谢。

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

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

---

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

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

---

您应该在ajax回调中再次绑定此事件

在这一行“$（'#container'）.html（$data）；”之后编写以下代码

---

您应该在ajax回调中再次绑定此事件

在这一行“$（'#container'）.html（$data）；”之后编写以下代码

---

live

现在已不推荐使用，请参见上的

以获取替换：

就像
live
，它的目标是绑定一个事件处理程序，当您第一次绑定它时，它也会为不存在的元素触发事件处理程序

在类似于OP的情况下，您需要的是：

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

live
现在已不推荐使用，请参见

上的

以获取替换：

就像
live
，它的目标是绑定一个事件处理程序，当您第一次绑定它时，它也会为不存在的元素触发事件处理程序

在类似于OP的情况下，您需要的是：

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

当您执行
$（'img'）.load（function（）{…}）
jQuery会获取它当时能找到的所有img元素（在您的例子中，它是99%document.ready事件）。尝试
$（'img'）.live（'load'，function（）{}）
强制jQuery在每次加载事件发生时搜索img元素当您执行
$（'img'）.load（function（）{…}）
jQuery获取它在那一刻能找到的所有img元素（在您的情况下，它是99%document.ready事件）。请尝试
$（'img'）。live（'load'，function（）{}）
在每次加载事件发生时强制jQuery搜索img元素，并且对于初始图像将调用两次
fadeIn
。很好，但是它不会被注意到。您可以解除触发器函数的绑定，然后再次绑定它。比如$（'img'）.unbind（'load'）.load（function（）{//do stuff here}）<代码>直播

看起来更优雅，承认吧。是的，但它也有缺点。如果有大量元素，可能会使页面沉重。。。因为它将再次执行相同的操作。@AatifFarooq但您的脚本也取决于元素的数量，并且不受此缺陷的保护。。对于初始图像，

fadeIn

将被调用两次。很好，但是它不会被注意到。您可以解除触发器函数的绑定，然后再次绑定它。比如$（'img'）.unbind（'load'）.load（function（）{//do stuff here}）<代码>直播看起来更优雅，承认吧。是的，但它也有缺点。如果有大量元素，可能会使页面沉重。。。因为它将再次执行相同的操作。@AatifFarooq但您的脚本也取决于元素的数量，并且不受此缺陷的保护。：（这似乎不会对原始图像集触发。：（这似乎不会对原始图像集触发。这不起作用。在文档的jquery

中解释（如上链接）：“在所有浏览器中，加载、滚动和错误事件（例如，在元素上）都不会冒泡。在Internet Explorer 8及更低版本中，粘贴和重置事件不会冒泡。此类事件不支持与委派一起使用，但可在事件处理程序直接连接到生成事件的元素时使用。”四年前，你的答案是错误的、误导性的，现在也是。被谷歌编入索引，让人困惑（比如我，搜索问题解决方案）。这行不通。在jquery
on
文档（如上链接）中解释道：“在所有浏览器中，加载、滚动和错误事件（例如，在一个元素上）不要冒泡。在Internet Explorer 8及更低版本中，粘贴和重置事件不会冒泡。此类事件不支持与委派一起使用，但可以在事件处理程序直接连接到生成事件的元素时使用。”四年前，你的答案是错误的，误导人，现在也是。被谷歌编入索引，让人困惑（像我一样，搜索问题解决方案）。