將事件監聽器添加到動態創建的按鈕

我有這樣的HTML：

<body> 
    <h1>Javascript in the Browser</h1> 
    <div id="removeReference"> 
    </div> 
    <div> 
    <p>This page looks a little sad without any style...</p> 
    <button id="styleButton">Apply some style!</button> 
    </div> 
    <div id="imagePlaceholder"> 
    </div> 
<script src="script.js"></script> 
</body>

在JavaScript文件，我有一個函數stylePage是通過點擊一個按鈕觸發並把它添加一些樣式，刪除按鈕本身，並創建一個新的按鈕。在這一點上，我想添加一個事件到這個動態創建的新按鈕，以便點擊時觸發功能createImage。

我知道使用庫會更好，但這是嘗試自學JavaScript。我想也許有可能從stylePage返回按鈕，並將事件偵聽器添加到返回值，但沒有奏效。任何建議非常感謝，謝謝！

function stylePage(){ 
    var body = document.getElementsByTagName("body"); 
    body[0].style.backgroundColor = "rgb(214, 214, 214)"; 
    body[0].style.color = "#778899"; 
    body[0].style.fontFamily = "Courier"; 
    body[0].style.textAlign = "center"; 
    var remove = document.getElementById("removeReference"); 
    remove.nextElementSibling.remove(); 
    var newButton = document.createElement("button"); 
    var newContent = document.createTextNode("Not enough?"); 
    newButton.appendChild(newContent); 
    document.body.insertBefore(newButton, remove); 
}; 

function createImage(){ 
    var img = document.createElement("img"); 
    img.src = "pepsi_dog_by_werelyokoman.jpg"; 
    document.getElementById("imagePlaceholder").appendChild(img); 
} 

var button = document.getElementsByTagName("button"); 
button[0].addEventListener("click", stylePage); 
//??? reference to newButton ??? .addEventListener("click", createImage);

來源

2016-08-20 HiFi

你會發現這篇文章有幫助：https://davidwalsh.name/event-delegate – SimianAngel

HTTP：//計算器.com/questions/1687296/what-is-dom-event-delegation –

感謝關於事件代表團的信息！ – HiFi

-1

要做到這一點是添加.addEventListener您stylePage函數結束的最簡單方法：

var newContent = document.createTextNode("Not enough?"); 
    newButton.appendChild(newContent); 
    document.body.insertBefore(newButton, remove); 
    newButton.addEventListener("click", createImage);  
};

JSFiddle demonstrating this。

但是，如果出於某種原因你不想這麼做 - 也許你無法控制動態創建按鈕的功能。在這種情況下，您可以使用MutationObserver來監視DOM中的更改。

你應該這樣做，像這樣：

var target = document.getElementsByTagName('body')[0]; 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
    if(mutation.addedNodes.length > 0 && mutation.addedNodes[0].firstChild.nodeValue == "Not enough?") { 
     mutation.addedNodes[0].addEventListener("click", createImage); 
    } 
    });  
}); 

var config = { attributes: true, childList: true, characterData: true }; 
observer.observe(target, config);

見this JSFiddle。

來源

2016-08-20 02:03:07

謝謝，這工作！我學到了新東西！ :) – HiFi

-1

您可以使用事件委派：

document.querySelector('body').on('click', function() { 
    //You need to identify the new elements here...... 
});

我創建了一個的jsfiddle：jsfiddle

來源

2016-08-20 02:31:49 Zich

這完全不符合OP所要求的 - 問題的全部是確定新的要素。 –

另外，當'document.body'獲取body元素時，使用'document.querySelector（'body'）'確實很愚蠢。但是，這甚至不能解決問題。 – jfriend00

問題的關鍵在於確保將點擊處理程序附加到動態創建的元素。這正是事件代表團要處理的事情。 –

將事件監聽器添加到動態創建的按鈕

回答

相關問題