向动态创建的按钮添加事件侦听器
Add event listener to dynamically created button
我浏览了其他答案,但没有找到这个问题的解决方案。
我有这个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);
最简单的方法是将.addEventListener
添加到stylePage
函数的末尾:
var newContent = document.createTextNode("Not enough?");
newButton.appendChild(newContent);
document.body.insertBefore(newButton, remove);
newButton.addEventListener("click", createImage);
};
JSFiddle演示这个。
但是假设你不想这样做,因为某些原因——也许你无法控制动态创建按钮的函数。在这种情况下,您可以使用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);
您可以使用事件委托:
document.querySelector('body').on('click', function() {
//You need to identify the new elements here......
});
我创建了一个jsfiddle: jsfiddle
相关文章:
- 如何在for循环中添加事件侦听器
- 如果选中了多个复选框,如何添加事件
- 正在ng重复元素上添加事件
- 在动态创建的标记上添加事件
- 如何在HTML列表中添加事件's子弹
- 将事件侦听器添加到文档,而不是签入元素存在,然后添加事件侦听器
- jQuery完整日历添加事件,仅包含月份和日期
- 是否可以在数字输入框中的小按钮中添加事件侦听器
- 在Google Chrome扩展中添加事件侦听器
- AngularJS:在.post()之后添加事件侦听器
- 对象 Javascript 中的标签无效 - 想要添加事件列表器
- 添加事件侦听器不起作用
- 如何为angular js条形图添加事件
- 在 http 请求中添加事件侦听器 ( request.on ) 是什么意思?而笏就是它的用途
- Iron:路由器在更改路由器上添加事件
- 如何为表行结果的每个按钮添加事件侦听器
- 在 javascript 中添加事件处理程序的位置
- YouTube API-动态添加事件侦听器
- 在聚合物的子菜单标题中添加事件
- 检查是否可以添加事件侦听器而不添加