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

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 连接），容器的内容将被 removed ，并且新的

innerHTML

string 将被解析，然后由浏览器。因此，过去附加到容器内任何内容的侦听器将不再工作。

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);
}

<body>
  <button id="bt1">Click me</button>
</body>

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>

Answer 3

显然你可以做到这一点。

    function start() {

        document.querySelectorAll(".input-complete").forEach(item => {
          item.addEventListener("click", e => {
            ROOT.innerHTML = App({
              fn: Panel,
              list: todoArray.filter(item => !item.completed),
              title: 'Uncompleted'
            });
            start()
          })
        })  
      
    }

    start()

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

问题描述投票：0回答：3

3个回答

最新问题

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

问题描述 投票：0回答：3

3个回答

最新问题

问题描述投票：0回答：3