追加后的动态图像onload？

Question

我面临的问题是,在我将div(每个div一个)中的一堆图像附加到容器(div)之后,我没有获得onload函数.

这是一个包含一堆变量的循环

$('#container').append('<div class="tile" style="position:absolute; top:'+(i*size)+'px; left:'+(j*size)+'px; width:'+size+'px; height:'+size+'px; overflow:hidden;" ><img src="'+map[i][j]+'"/></div>');

所有变量都很好,所有图像都正确加载,但这从不起作用

$('.tile img').live('load', function(){
console.log("loaded");
});

要么

$('.tile img').on('load', function(event){
console.log("loaded");
});

我试过更新的.on jQuery函数,没有去..

编辑:[+]添加.on代码(文档准备好后,两个函数都放在右上角)

Answer 1

更新:我玩了一下,以下策略也适用于新创建的图像上的加载事件.首先,我创建图像,然后将其附加到div中,然后将其附加到文档中.

http://jsfiddle.net/lucuma/sHGm9/1/

$('.slideshow').each(function(i) {

    var $img = $('<img src="..." />').on('load', function(){
        alert('loaded');
    });

    $(this).append( $('<div class="tile" style="" ></div>').append($img) );               
    // you'd need to just use your div example here

});

原答案:

我可以想到两件事..在你追加之前添加on/live或者把它改成这样的东西:

var $img = $('<img src="..." />');

$img.on('load', function() {
    alert('loaded');
});

$('#slideshow').append($img);  // adapted for my example

http://jsfiddle.net/lucuma/sHGm9/