如何使用 jQuery 将 Onclick 事件绑定到动态添加的 HTML 元素

使用 jQuery 时，经常需要动态添加 HTML 元素页面。在这种情况下，您可能需要将事件处理程序附加到这些元素。然而，将事件处理程序附加到页面加载后添加的元素可能具有挑战性。

问题和先前的解决方案

传统上，可以使用 .bind() 方法来将事件处理程序附加到动态添加的元素。但是，此方法已被弃用，取而代之的是 .on() 方法。

使用 .on() 的正确解决方案

将 onclick 事件正确绑定到使用 jQuery 动态添加的元素，您应该使用 .on() 方法，如下所示：

$(document).on('click', '.my-element', function() {
  // Your event handling code goes here
});

在此示例中，.on() 方法用于将事件处理程序附加到文档，指定“click”事件和“.my-element”选择器。这可确保任何具有“my-element”类的元素都会触发事件处理程序，无论其何时添加到页面。

用法示例

这里是.on() 方法的示例实现：

在此示例中，.on() 方法用于将事件处理程序附加到 #container div 中具有“my-element”类的任何元素。当点击任何此类元素时，都会触发警报消息。