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

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 元素，然后对它们使用单个委托的单击事件处理程序。像这样：

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

Answer 2

终于找到了解决方案
问题出在这里

cont.innerHTML += '<div class="sas" id="' + i + '" ></div>';

我试着像@RoryMcCrossan 建议的那样以某种方式实现它 - 我以正确的方式创建了 div 元素

//cont.innerHTML += '<div id="' + i + '"></div>';
var div = cont.appendChild(document.createElement('div'))
div.setAttribute('id', i);
div.setAttribute('class','sas');
var pic = document.getElementById(i);
pic.appendChild(img)
div.addEventListener('click', function () {
   alert('mda')
});

我唯一的解释是 Element.innerHTML 比通过节点添加元素要慢得多，所以我想给全人类一个巨大的建议 - 永远不要使用硬编码 innerHTML 来操纵 DOM.谢谢

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

Adding event listeners on array of pics in specific way

javascript

arrays

jquery

dom-events