私は動的に作成する各ボックスにイベントハンドラを割り当てる方法を見つけようとしています。現時点では、ユーザーは「上に追加」または「下に追加」をクリックすることができ、クリックした場所に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();
}
、それだけでjQueryのイベントの委任を行うに付ける機能で構築を使用することが非常に簡単ではないでしょうか? – adeneo
[on'のドキュメント](http://api.jquery.com/on/)には、啓発されているかもしれない委任イベントに関するセクションがあります。 –
@adeneo私はコンソールにログを記録するとき、私のプログラムは異なる四角をクリックできることを検出するので、なぜ正しく動作しないのか分かりません。 jqueryと同じように、イベントリスナーを親要素に追加しました。 – blazerix