如何將負載處理程序附加到動態創建的項目

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