JavaScript onclick函数仅起作用一次(非常简单的代码) [英] JavaScript onclick function only works once (very simple code)
问题描述
我知道有很多与此相关的主题，但是它们解决了一些可变的问题.我的要简单得多，但是没有用.只工作一次.
I know there are many topics about this, but they address some variable issue. Mine is much more simple, but it is not working. Only works once.
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语句(如其他一些主题所建议的那样).
I tried taking the clicked function in and out of the onclick statement (as some other topics suggested).
我还尝试过移动bt1变量声明(并且完全不使用变量).
I also tried moving the bt1 variable declaration around (and not using a variable at all).
推荐答案
每当您分配给容器的innerHTML时(即使您只是与现有HTML串联)，该容器的内容也会被删除. ，新的innerHTML string 将被解析，然后由浏览器呈现.因此，以前附加到容器内部任何内容的侦听器将不再起作用.
Whenever you assign to the innerHTML of a container (even if you're just concatenating with existing HTML), the container's contents will be removed, and the new innerHTML string will be parsed and then rendered by the browser. So, listeners that used to be attached to anything inside of the container will no longer work.
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 +=类似的功能:
For what you're doing, either use insertAdjacentHTML, which will not corrupt listeners, but will perform similar functionality to 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:
Or, explicitly create the new element to append, and use 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);
}
<body>
<button id="bt1">Click me</button>
</body>
这篇关于JavaScript onclick函数仅起作用一次(非常简单的代码)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
