在前端开发中，经常需要对页面元素进行交互和操作，而jQuery是一种非常流行的JavaScript库，它提供了许多方便的方法来选取、遍历和修改文档对象模型（DOM）。其中，live() 和 delegate() 两个方法都可以用来处理动态添加的元素事件绑定，但它们之间有一些区别。
live() 方法
live() 方法允许您为当前或未来的匹配元素附加一个或多个事件处理程序。这意味着，无论何时向文档中添加新的匹配元素，该事件处理程序都将自动附加到它们上面。例如，下面的代码将为所有类名为 ".button" 的按钮元素附加点击事件处理程序：
$('.button').live('click', function() {
// 点击事件处理程序
});尽管这种方法很方便，但它却存在一些性能问题。因为它会将事件处理程序附加到整个文档，所以当页面变得越来越大时，它可能会导致性能下降。
delegate() 方法
delegate() 方法从根本上解决了live()方法的性能问题。它通过将事件处理程序附加到文档中的父元素，然后使用选择器来匹配子元素来工作。这种方式使得事件处理程序仅在必要时附加到匹配的元素上，而不是整个文档。
例如，下面的代码将为所有类名为 ".container" 的元素中的 ".button" 元素附加点击事件处理程序：
$('.container').delegate('.button', 'click', function() {
// 点击事件处理程序
});在这种情况下，点击事件处理程序仅在 ".container" 元素中的 ".button" 元素被单击时才会执行。这使得delegate()方法比live()方法更加灵活且性能更好。
结论
虽然live() 和 delegate() 两个方法都可以用来处理动态添加的元素事件绑定，但它们之间有一些区别。如果您需要在整个文档中处理事件，则可以使用live()方法。但是，如果您只需要在特定的父元素中处理事件，则应该使用delegate()方法。
总体而言，delegate() 方法比 live()方法更灵活、更高效，并且可以更好地适应文档变化。因此，在编写新代码时，建议使用delegate()方法。
希望本篇文章对您有所帮助！
示例代码
下面是一个例子，演示如何使用delegate()方法为动态添加的列表项添加点击事件处理程序：
-- -------------------- ---- -------
--------- -----
------
------
-------------------- -- ------------------
------- -----------------------------------------------------------
--------
------------ -
-- --------------
------------------------- -------- ---------- -
----------------------------
---
-- -------
-------------------------- -
-------------------------- ------------
---
---
---------
-------
----- -
---------------- -------------
-
--------
-------
------
--- ----------
-------- ------
-------- ------
-------- ------
-----
------- ------------ -------------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/14694