javascript - 事件处理程序不适用于所有元素

标签 javascript jquery html css

<分区>

我正在尝试找到一种方法来为我动态创建的每个框分配事件处理程序。目前,用户可以点击“在上方添加”或“在下方添加”,他们点击的位置会出现 2 行框。

我也在尝试做到这一点,以便当用户点击特定方 block 时,会弹出一个颜色选择器,并且可以更改该特定方 block 的颜色。

但出于某种原因,颜色选择器仅在用户单击前两行方 block 时才会弹出。如果在当前集的下方或上方动态添加了更多行,则单击方 block 时不会发生任何事情。

有谁知道为什么会这样?

到目前为止我做过/尝试过的事情:

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();
}

最佳答案

在第 2 行试试这个:

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

关于javascript - 事件处理程序不适用于所有元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39626811/

相关文章:

javascript - 页面加载后从下拉列表中设置一个元素

javascript - 为什么我的 JavaScript 变量不起作用?

javascript - 在移动设备上禁用 Hover Div 内的 anchor ,直到打开

php - 停止 PHP 执行 <?在 javascript 中

javascript - 在提供的字符串中设置 anchor 标记

javascript - HTML5 音频 - IOS 浏览器不工作

java - Struts:突出显示日历中的日期范围 (JQuery/Javascript)

html - 使用伪类 :not and :before together

android - Android 可以直接从浏览器打印吗?

html - 如何创建内容为白色的博客背景