jQuery点击事件在动态追加按钮上失效的原因排查

这是个很常见的jQuery事件绑定问题，核心原因是事件绑定的时机和DOM元素存在的时机不匹配。

当你在$(document).ready()里直接执行$("#add").on("click", ...)时，jQuery只会给此时已经存在于DOM树中的元素绑定点击事件。而你通过.append()动态添加的按钮，在ready函数执行的那一刻还没被创建出来，所以这个点击事件根本没绑定到它身上，自然点击后没反应。

怎么解决？用事件委托（Event Delegation） #

jQuery的事件委托机制可以完美解决这个问题——你可以把事件绑定到一个已经存在的父元素（甚至document，但推荐用更接近目标元素的父元素，性能更好）上，让它监听子元素的点击行为。这样不管子元素是页面加载时就有的，还是后来动态生成的，只要匹配指定的选择器，事件就会触发。

举个例子：
假设你的按钮是追加到一个id为container的容器里，那可以这么写：

$(document).ready(function () {
  // 绑定到父容器，监听子元素#add的点击
  $("#container").on("click", "#add", function () {
    alert("Test");
  });
});

如果没有合适的父容器，也可以绑定到document：

$(document).ready(function () {
  $(document).on("click", "#add", function () {
    alert("Test");
  });
});

额外提醒：避免重复的ID #

另外要注意，HTML里的id必须是唯一的。如果你打算动态生成多个按钮，都用id="add"是不符合规范的，可能会导致其他问题。建议改成用class，比如：

// 动态追加按钮时用class
.append('<button type="button" class="add-btn">Hinzufügen</button>')

对应的事件绑定就改成监听class选择器：

$(document).ready(function () {
  $("#container").on("click", ".add-btn", function () {
    alert("Test");
  });
});

这样多个动态生成的按钮都能正常触发点击事件啦！

内容的提问来源于stack exchange，提问作者user17880377