複数の要素にイベントハンドラを割り当てる方法（colorPicker）

Question

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

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

しかし、私のプログラムはちょっとバグがあります。ユーザーがクリックした最初の四角形でのみ機能し、colorPickerは再びポップアップしません。

これを修正する方法や、より良い選択肢があれば誰でも知っていますか？

マイコード：私はあなたのCodePenに気づい

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

var theParent = document.querySelector(".container"); 
theParent.addEventListener("click", doSomething, false) 

//var picker = new Picker() 
function doSomething(e) { 
    console.log("gets inside doSomething") 
    console.log(e.target) 
    console.log(e.currentTarget) 
    if (e.target !== e.currentTarget) { 
     var clickedItem = e.target.id; 
     console.log("Hello " + clickedItem); 
     var k = document.getElementById(clickedItem) 
     var picker = new Picker(k) 
     picker.show(); 

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

    //e.stopPropagation(); 
} 

Answer 1

あなたがdoSomethingのための完全なコードを投稿しませんでした。 picker変数が関数にとってローカルなので、問題があります。コード実行がIFステートメント内に入らない場合、ピッカー変数は決して作成されません。ファンクション外の変数pickerを宣言するコードのコメントを外すだけで、新しいピッカーをインスタンス化するコード行の前にあるvarディレクティブを削除します。 picker.settings.parent = k;

var picker = null; // Initialize global variable 

function doSomething(e) { 
    console.log("gets inside doSomething") 
    console.log(e.target) 
    console.log(e.currentTarget) 
    if (e.target !== e.currentTarget) { 
     var clickedItem = e.target.id; 
     console.log("Hello " + clickedItem); 
     var k = document.getElementById(clickedItem) 

     // Reference the global "picker" variable 
     if (!picker) { 
      picker = new Picker(k) 
     } else { 
      // Set the "parent" element of the picker to the newly clicked element 
      picker.settings.parent = k; 
     } 
     picker.show(); 

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

    //e.stopPropagation(); 
}