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

时间:2018-11-13 04:22:58

标签: javascript html onclick onclicklistener

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

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

2 个答案:

答案 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>