如何将负载处理程序附加到动态创建的项目

Question

我想将负载处理程序绑定到动态创建的对象（我的生产代码中的骨干视图）。我试图使用In jQuery, how to attach events to dynamic html elements?中概述的方法，它适用于点击处理程序，但不适用于加载处理程序。有谁知道如何解决这个问题？

这工作（与单击处理）

$(document).ready(function() { 
    $("body").on("click", "img", function(){ 
     console.log("foo"); 
    }); 

    create(); 
    }); 

    function create(){ 
    $img = $("<img />").attr("src", "http://www.pureweber.com/wp-content/uploads/2011/04/jquery_icon.png"); 
    $("body").append($img); 
    } 

但这并不（带负载处理）

$(document).ready(function() { 
    $("body").on("load", "img", function(){ 
     console.log("foo"); 
    }); 

    create(); 
    }); 

    function create(){ 
    $img = $("<img />").attr("src", "http://www.pureweber.com/wp-content/uploads/2011/04/jquery_icon.png"); 
    $("body").append($img); 
    } 

Answer 1

不幸的on用subselector使用只适用于事件类型的泡沫向上。 DOM load事件不会冒泡树，所以它永远不会到达您正在侦听它的body。

见http://en.wikipedia.org/wiki/DOM_events

您将需要处理程序手动连接到您创建的任何图像。

$(document).ready(function() { 
    $("body img").on("load" onLoad); 

    create(); 
}); 

functon onLoad(){ 
    console.log("foo"); 
} 

function create(){ 
    $("<img />") 
    .on('load', onLoad) 
    .attr("src", "http://www.pureweber.com/wp-content/uploads/2011/04/jquery_icon.png") 
    .appendTo('body'); 
}