前端tiff格式的图片 页面上怎么动态展示

[obgn]

后台给的数据tiff图片，我要在页面上展示，github上是有个tiff插件，不过用的onload事件，我在外围获取不到动态创建的元素

<script src="jquery3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tiff.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageFiles = ["1.tiff", "2.tiff", "3.tiff", "4.tiff"];
var loadImage = function(filename,i) {
var xhr = new XMLHttpRequest();
xhr.open('GET', filename);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) {
var buffer = xhr.response;
var tiff = new Tiff({
buffer: buffer
});
var canvas = tiff.toCanvas();
var width = tiff.width();
var height = tiff.height();
if(canvas) {
canvas.id='my'+i;
var $elem = $('<div></div>');
$elem.append(canvas);

$('body').append($elem);
}
};
xhr.send();
};
for(var i = 0, len = imageFiles.length; i < len; ++i) {
loadImage(imageFiles[i],i);
}
console.log($('canvas'));//输出r.fn.init(0)=>length:0=>prevObject:r.fn.init(1)=>0:document
</script>

ps： 我要遍历每个图片加点击事件又该怎么做？？？