Добавление прослушивателей событий по массиву фото по определенному пути

Question

У меня есть куча изображений, которые должны быть распределены в conatiner один за другим, что означает . Каждое изображение показывает точное после загрузки предыдущего изображения и показывает, и каждое изображение должно получить прослушиватель событий.
Вот мое решение 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

Наконец я пришел к решению
Проблема была здесь

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 довольно медленнее, чем добавление элементов по узлам, поэтому я хочу дать огромный совет для всего человеческого рода - никогда не используйте hardcode innerHTML для управления DOM. Спасибо

Answer 2

Более простым решением было бы создать все элементы 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