动态添加的按钮 onclick 不起作用 - JavaScript

在 JavaScript 中，我们经常需要动态地添加按钮来实现某些功能。但有时候我们发现添加的按钮并没有实现预期的功能，即 onclick 事件不起作用。这个问题一般有以下两种原因：

1. 事件绑定时机的问题

在 JavaScript 中，我们可以通过 addEventListener 或者 onclick 的方式来绑定事件。但是，当我们动态添加按钮时，需要注意绑定事件的时机。如果在添加按钮的同时就绑定事件，可能会出现绑定不成功的情况。因为此时添加的按钮还没有被 DOM 元素所创建，事件无法被正确绑定。

解决办法：

// 1. 先创建按钮
var btn = document.createElement("button");
btn.innerHTML = "按钮";

// 2. 绑定事件
btn.onclick = function() {
  // 按钮点击事件的代码逻辑
};

// 3. 将按钮添加到 DOM 中
document.body.appendChild(btn);

或者使用 addEventListener 方式绑定事件：

// 1. 先创建按钮
var btn = document.createElement("button");
btn.innerHTML = "按钮";

// 2. 将按钮添加到 DOM 中
document.body.appendChild(btn);

// 3. 绑定事件
btn.addEventListener("click", function() {
  // 按钮点击事件的代码逻辑
});

2. 作用域的问题

有时候，我们在绑定事件时会使用外部的变量或函数，例如：

var num = 0;

function addNum() {
  num++;
}

var btn = document.createElement("button");
btn.innerHTML = "按钮";
btn.onclick = function() {
  addNum(); // 点击按钮后调用 addNum 函数
};

但是，当我们将按钮添加到 DOM 中后，实际上按钮的 onclick 事件是在全局作用域下运行的，而不是在 addNum 函数所在的作用域中。因此，addNum 函数中的 num 变量在 onclick 中无法访问，会导致预期的功能无法实现。

解决办法：

可以使用闭包来解决作用域的问题：

function addNum() {
  var num = 0;
  return function() {
    num++;
    console.log(num);
  };
}

var btn = document.createElement("button");
btn.innerHTML = "按钮";
btn.onclick = addNum(); // 这里 addNum() 返回的是一个函数

或者使用 ES6 中的箭头函数：

let num = 0;

const addNum = () => {
  num++;
};

var btn = document.createElement("button");
btn.innerHTML = "按钮";
btn.onclick = () => {
  addNum();
};

以上就是动态添加的按钮 onclick 不起作用的解决办法。在实际使用中，如果遇到类似的问题，可以先检查事件绑定时机和作用域。