0
動的に作成する各ボックスにイベントハンドラを割り当てる方法を見つけようとしています。現時点では、ユーザーは「上に追加」または「下に追加」をクリックすることができ、クリックした場所に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();
}
読みますhttps://learn.jquery.com/events/event-delegation/） – Rayon
@Rayonイベントの委任について読んで、親要素にリスナーを割り当てて、バインドを避けるようにしました各子要素にリスナーを追加する（非常に非効率的） – blazerix
何を伝えようとしていますか？なぜあなたはそれが非効率的であると感じましたか？ – Rayon