将事件监听器添加到动态创建的按钮

我有这样的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

问题的关键在于确保将点击处理程序附加到动态创建的元素。这正是事件代表团要处理的事情。 –

将事件监听器添加到动态创建的按钮

回答

相关问题