イベントハンドラがすべての要素で機能しない

Question

私は動的に作成する各ボックスにイベントハンドラを割り当てる方法を見つけようとしています。現時点では、ユーザーは「上に追加」または「下に追加」をクリックすることができ、クリックした場所に2行のボックスが表示されます。

また、ユーザーが特定の四角形をクリックすると、colorPickerがポップアップし、その特定の四角形の色を変更できるようにしようとしています。

しかし、何らかの理由で、ユーザーが最初の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行目でこれを試してください：あなたはjQueryのを使用している

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

Answer 2

これはあなたの問題のすべてを解決しないかもしれませんが、あなたは、クリックからe.preventDefault();を削除する場合：

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

私がこれまで試した/やっていること

新しく作成された各セクションの色を変更することができます。それが役に立てば幸い？