Question

我知道有很多与此相关的主题，但是它们解决了一些可变的问题。我的要简单得多，但是没有用。只工作一次。

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变量声明（并且完全不使用变量）。

Answer 1

每当您将其分配给容器的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);
}

Answer 2

另一种快速解决方案是在单击的方法中重新附加侦听器。

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>

JavaScript onclick函数只能使用一次（非常简单的代码）

2 个答案: