我知道有很多与此相关的主题,但是它们解决了一些可变的问题。我的要简单得多,但是没有用。只工作一次。
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
document.body.innerHTML += '<div>welcome</div>';
}
<body>
<button id="bt1">Click me</button>
</body>
我尝试从clicked
语句中取出onclick
函数(如其他一些主题所建议的那样)。
我还尝试过移动bt1
变量声明(并且完全不使用变量)。
答案 0 :(得分:4)
每当您将其分配给容器的innerHTML
时(即使您只是与现有HTML串联),该容器的内容也将被删除,而新的{{1} } string 将被解析,然后由浏览器呈现。因此,以前附加到容器内部任何内容的侦听器将不再起作用。
innerHTML
const container = document.querySelector('#container');
const child = container.children[0];
// Before: the child's parent is the `container`, as expected:
console.log(child.parentElement);
container.innerHTML += '';
// After: the child has no parent element!
// If a listener was attached to the child before,
// the child will no longer even be in the document!
console.log(child.parentElement);
对于您正在做的事情,请使用<div id="container">
<div>child</div>
</div>
,它将不会破坏侦听器,但将执行与insertAdjacentHTML
类似的功能:
innerHTML +=
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');
}
或者,显式创建要添加的新元素,并使用<body>
<button id="bt1">Click me</button>
</body>
:
appendChild
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
const div = document.createElement('div');
div.textContent = 'welcome';
document.body.appendChild(div);
}
答案 1 :(得分:0)
另一种快速解决方案是在单击的方法中重新附加侦听器。
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked(a) {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
<body>
<button id="bt1">Click Me</button>
</body>