事件處理程序不適用於所有元素

我試圖找到一種方法來將事件處理程序分配給我動態創建的每個框。目前，用戶可以點擊「添加上方」或「添加下方」，無論點擊哪處，都會出現2行框。事件處理程序不適用於所有元素

我也試圖做到這一點，當用戶點擊特定的方塊時，會彈出一個colorPicker，並且該方塊的顏色可以更改。

由於某些原因，只有在用戶點擊前兩排正方形時，colorPicker纔會彈出。如果更多行被動態添加到當前設置的下方或上方，則當您單擊方塊時不會發生任何事情。

有誰知道爲什麼會發生這種情況？

我做了什麼/試過到目前爲止：

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

來源

2016-09-21 blazerix

你使用jQuery，是不是很輕鬆了許多，只是使用jQuery的內置abilty做事件委派？ – adeneo

[關於'on'的文檔]（http://api.jquery.com/on/）有關於您可能會發現的委派事件的部分。 –

@adeneo當我登錄到控制檯時，我的程序確實檢測到能夠點擊不同的方塊，所以我不確定它爲什麼不能正常工作。我將事件監聽器添加到父元素，就像jquery所做的那樣。 – blazerix

試試這個第2行：

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

來源

2016-09-21 21:42:06

感謝您的響應，但是當我添加一個新行，沒有彈出 – blazerix

真的嗎？我用上面的代碼替換了第1行和第2行，它適用於所有新行。 –

你可以通過codepen鏈接嗎？ – blazerix

這可能不會解決你所有的問題，但如果你從點擊刪除e.preventDefault();：

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

它會讓你改變每個新創建的部分的顏色。希望能幫助到你？

來源

2016-09-21 21:37:01 sean

你確定嗎？我剛剛在下面添加了一個新的部分（刪除該行後），並沒有顏色選擇器彈出 – blazerix

事件處理程序不適用於所有元素

回答

相關問題