javascript - 以特定方式在图片数组上添加事件监听器

Question

我有一堆图像，应该一个接一个地分布在容器中，这意味着每个图像在上一个图像加载并显示后精确显示，并且每个图像都应该有一个事件监听器。
这是我的解决方案https://jsfiddle.net/e2sfzn1u/4/
我使用 Image.onload 将图像节点添加到标记中并为该节点定义事件监听器，当这些准备就绪时，它会(递归地)转到另一个图像。

var pics = [
   'http://i.imgur.com/1oT2ZpOb.jpg',
   'http://i.imgur.com/XsViuLib.jpg',
   'http://i.imgur.com/aTDTI8Eb.jpg',
   'http://i.imgur.com/4kLvWOdb.jpg'
]
var cont = document.getElementById('container');
var each = function(arr, i) {
   if (i === undefined) {
      i = 0;
   }
   if (i < arr.length) {
      var img = new Image();
      img.onload = function() {
         cont.innerHTML += '<div class="sas" id="' + i + '" ></div>';
         var pic = document.getElementById(i);
         pic.appendChild(img);
         pic.addEventListener('click', function() {
            alert('mda')
         });
         each(arr, i + 1);
      };
      img.src = arr[i];
   }
};
each(pics);

看起来很简单，但有一个问题 - 事件监听器仅为最后一个元素定义。

Answer 1

一个更简单的解决方案是在循环中创建所有 img 元素，然后对它们使用单​​个委托(delegate)的单击事件处理程序。像这样的事情:

for (var i = 0; i < pics.length; i++) {
    $('<img />', {
        'src': pics[i],
        'class': 'sas',
        'data-id': i,
        'load': function() {
            var id = $(this).data('id');
            console.log(id + ' img loaded');
        }
    }).appendTo('#container')
}

$('#container img').click(function() {
    alert($(this).data('id'));
});

Updated fiddle