在我的代码中,我有一个 h1 容器,里面有 h1 元素,如下所示:
<div id="container_h1"><h1 id="h1">Title H1</h1></div>
然后,我将一个事件侦听器附加到 h1 元素,以便在用户单击 h1 元素时提醒 h1 文本:
var h1 = document.getElementById("h1");
h1.addEventListener(
"click",
function()
{
alert(h1.innerHTML);
},
false
);
然后,我有 2 个用于删除和插入 h1 元素的按钮,如下所示:
<input type="button" value="remove H1" onclick="remove_h1();">
<input type="button" value="insert H1" onclick="insert_h1();">
//container_h1 element :
var container_h1 = document.getElementById("container_h1");
//Remove h1 :
function remove_h1()
{
container_h1.innerHTML = "";
}
//Re-appear h1 :
function insert_h1()
{
container_h1.innerHTML = '<h1 id="h1">Title H1</h1>';
}
问题 :
当我通过单击“删除 H1”按钮使 h1 元素消失时使 h1 元素重新出现单击“插入 H1”按钮,然后单击 h1 元素,代码中的h1.addEventListener没有任何作用,没有触发警报.
那么,当 h1 元素重新出现时,如何将相同的事件侦听器重新附加到 h1 元素呢?
谢谢。
代替h1.addEventListener(...)
add
document.body.addEventListener('click', function(element) {
if (element.target.nodeName == 'H1') {
// your code
}
})
所以你将事件监听器绑定到body
而不是h1
。
问题是你的h1.addEventListener(...)
is only应用于当前 DOM 中现有的<h1>
元素,但不适用于动态创建的元素。
http://www.theappguruz.com/blog/dynamic-event-binding-demo-jquery http://www.theappguruz.com/blog/dynamic-event-binding-demo-jquery
在 jQuery 中,如何将事件附加到动态 html 元素? https://stackoverflow.com/questions/1359018/in-jquery-how-to-attach-events-to-dynamic-html-elements
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)