在前端开发中，有时需要通过JavaScript动态地向HTML文档中添加元素。而对于这些动态创建的HTML元素，我们也需要为它们绑定事件处理函数，以实现交互功能。
在jQuery中，可以通过以下方式来为动态HTML元素添加事件：
使用on()方法
jQuery提供了一个on()方法，可以用来为指定的元素添加事件处理函数。这个方法不仅可以为静态HTML元素添加事件，还可以为动态HTML元素添加事件。具体用法如下：
$(document).on('click', '#dynamic-element', function() {
// 这里是事件处理函数的代码
});上述代码中，$(document)表示选择整个文档，而#dynamic-element则是要添加事件的动态HTML元素的选择器。我们可以将#dynamic-element替换为任何其他动态HTML元素的选择器，以便为其绑定相应的事件处理函数。
需要注意的是，由于on()方法是将事件处理函数绑定到文档对象上的，因此在事件处理函数中使用this关键字时，this所指的并不是被点击的动态HTML元素本身，而是指向了文档对象。如果需要访问事件触发的元素本身，可以使用event.target属性来获取。
使用delegate()方法
除了on()方法外，jQuery还提供了一个delegate()方法，可以用来为指定的元素的子元素添加事件处理函数。与on()方法不同的是，delegate()方法会将事件处理函数绑定到指定元素的子元素上，而不是文档对象上。具体用法如下：
$('#parent-element').delegate('#dynamic-element', 'click', function() {
// 这里是事件处理函数的代码
});上述代码中，#parent-element表示要添加事件的父元素，而#dynamic-element则是要添加事件的动态HTML元素的选择器。
需要注意的是，delegate()方法在jQuery版本1.7之后被废弃，建议使用on()方法代替。
使用live()方法（已过时）
在jQuery版本1.7之前，可以使用live()方法为动态HTML元素添加事件处理函数。但由于其性能问题和安全隐患，自jQuery版本1.7之后，该方法已经被废弃，不再建议使用。
以下是一个使用live()方法为动态HTML元素添加点击事件的示例代码：
$('#dynamic-element').live('click', function() {
// 这里是事件处理函数的代码
});示例代码
以下是一个完整的示例代码，演示如何使用on()方法为动态HTML元素添加点击事件处理函数：
-- -------------------- ---- -------
--------- -----
------
------
-------------------------------
------- -----------------------------------------------------------
------- -----------------------
---------------------------- -
-- -----------------
------------------------ ------------------------------------------------
-- ---------------
----------------------- ------------------ ---------- -
-------------------
---
---
---------
-------
------
---- ------- ---
-------
-------上述代码中，我们使用jQuery动态创建了一个按钮元素，并将其添加到页面中。然后，通过on()方法为动态按钮添加了一个点击事件处理函数，当用户点击这个动态按钮时，会弹出一个提示框。
总结：
在jQuery中为动态HTML元素添加事件处理函数，可以使用on()方法、delegate()方法或`
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8258
