为什么我的 JavaScript 事件在添加新元素后不触发？

附加后 JavaScript 不触发

问题摘要

使用 JavaScript 将新输入元素添加到网页时，后续事件可能不会触发。这是因为 jQuery 不知道这些新添加的元素。

事件委托和冒泡

jQuery 通过为特定元素注册事件处理程序来工作。但是，当动态添加新元素时，这些事件处理程序无法识别它们。为了解决这个问题，使用了事件委托。

事件委托涉及监听在加载 jQuery 时已经存在于 DOM 中的父元素上的事件。当嵌套子元素内发生事件时，它会向上冒泡到父元素，事件处理程序可以捕获该事件。

代码解决方案

要在提供的代码中使用事件委托，应修改按钮的事件处理程序以使用 on() 方法。该方法允许将事件监听委托给父元素。

$(document).on('click', '.races', function(e) {
  // ... rest of the code
});

通过使用 $(document).on()，事件将被委托给文档对象，该对象在 DOM 中存在页面加载。这确保了新添加的 .races 元素中的事件将被事件处理程序捕获和处理。

以上是为什么我的 JavaScript 事件在添加新元素后不触发？的详细内容。更多信息请关注PHP中文网其他相关文章！