Обработчик событий не работает для всех элементов

Question

Я пытаюсь найти способ назначить обработчики событий для каждого окна, которое я создаю динамически. На данный момент пользователь может нажать «Добавить выше» или «Добавить ниже», и будут отображаться 2 строки ящиков, где бы они ни находились.

Я также пытаюсь сделать так, чтобы, когда пользователь нажимает на определенный квадрат, появляется цветная панель, и цвет определенного квадрата может быть изменен.

По какой-то причине цветовой приказ появляется только тогда, когда пользователь нажимает на первые две строки квадратов. Если добавлено больше строк динамически добавлено ниже или выше текущего набора, ничего не происходит, когда вы нажимаете на квадраты.

Кто-нибудь знает, почему это может произойти?

Что я сделал/пытался до сих пор:

http://codepen.io/anon/pen/bwBRmw

var theParent = document.querySelector(".container"); 
theParent.addEventListener("click", doSomething, false) 
function doSomething(e) { 
    console.log("gets inside doSomething") 
    console.log(e.target) 
    console.log(e.currentTarget) 
if (e.target !== e.currentTarget && e.target.id !== "") { 
    var clickedItem = e.target.id; 
    console.log("Clicked on " + clickedItem); 
    var led = document.getElementById(clickedItem) 

    if(!picker){ 
     console.log("new picker initialized") 
     picker = new Picker(led) 
    } 
    else{ 
     console.log("gets inside else case") 
     picker.settings.parent = led; 
    } 
    picker.show(); 

} 
picker.on_done = function(colour) { 
    $(led).css('background-color',colour.rgba().toString()); 
    picker.hide() 
    } 

//e.stopPropagation(); 
} 

Answer 1

Попробуйте это на линии 2:

$(document).on("click", ".container", doSomething); 

Answer 2

Это не может решить все ваши проблемы, но если удалить e.preventDefault(); из щелчку:

$("body").on('click', ".repeat", function (e) { 
     e.preventDefault(); 

он позволит вам изменять цвета на каждом из вновь созданных разделов. Надеюсь, поможет?