JQuery .on()事件处理程序用于动态加载图像的用法

Question

我的页面通过ajax响应动态生成。

每个响应都有指定id的img元素。我需要在加载时淡入它们。

.load()和.bind('load') 在页面第一次加载时运行良好。但是在下一个响应中肯定不起作用。

$('#my_img').load(function(){
   $(this).hide().fadeIn('slow');
});

所以我需要使用.on()事件处理程序。但是不起作用。

$('body').on('load','#my_img',function(){
   $(this).hide().fadeIn('slow');
});

注意：这不是缓存问题。Img src还有一个随机查询字符串。

- Levent Çorapsız

---

加载事件不会冒泡，因此无法委托，所以你想做的事情是无法完成的！ - adeneo

将处理程序绑定到 .load() 方法的句柄中怎么样？ - T J

你仍然可以在 body 层面捕获事件。 - A. Wolff

你可以在将Ajax响应添加到页面之前直接将处理程序绑定到图像。如果您添加有关如何将响应添加到页面的代码，我们可能可以帮助您解决这个问题。 - rdubya

简单来说，重新绑定 AJAX 回调中的 on 方法到图像或任何你需要的元素上。 - Giacomo Paita

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Levent Çorapsız

Answer 1

onload事件不会冒泡，因此您不能委托它。但是，如果您不需要支持IE8及以下版本，则可以捕获事件，这将适用于任何动态图像：

document.body.addEventListener(
    'load',
    function(event){
        var elm = event.target;
        if( elm.id === 'my_img'){ // or any other filtering condition
            // do some stuff
        }
    },
    true // Capture event
);

-DEMO-

- A. Wolff

---

谢谢。这个可以用。我不需要支持古老的浏览器和它的用户 :) - Levent Çorapsız

Answer 2

你可以尝试使用Jquery的ready事件来代替on.load，以便在元素准备就绪时运行一些代码。 这是我制作的一个演示它的fiddle：https://jsfiddle.net/yosefh/66g0xjre/1/。

$(document).ready(function() {
  $('div').click(function() {
    var newDiv = $('<div></div>');
      $(newDiv).ready(function() {
        $(newDiv).fadeIn("slow");
      });
      $('body').append(newDiv);
    });
});

- yosefrow