在使用 jQuery 进行 DOM 操作时，我们可能会遇到一个问题：当我们动态创建元素并将其添加到文档中后，jQuery 选择器不能正确地找到这些新元素。本文将介绍这个问题的原因，以及如何解决这个问题。
问题的原因
当文档加载完成后，jQuery 将使用选择器查找文档中所有匹配的元素，并保存它们的引用。然而，如果我们在文档加载后通过 JavaScript 动态创建了新的元素并将它们添加到文档中，jQuery 并不会自动更新它的引用列表。因此，我们不能使用 jQuery 的选择器来选择这些动态创建的元素。
考虑下面的示例：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ------------ -------- ----------------------------------------------------------- ------- ------ ----- --------------------- -------- ------------------- ---------------- --------- ------------------------------ - ------------------------------------ - ---------------------------------- -------------- ------ -------------------------- - ---------------------- ------ ----- ---------- ------- -------
在这个示例中，我们有一个空的 div 容器和一个添加元素的按钮。当我们点击按钮时，会向容器中添加一个新的 p 元素。我们还添加了一个点击事件监听器，在用户单击任何 p 元素时都会弹出警告框。
然而，当我们运行这个示例并单击添加元素按钮后，我们会发现点击新创建的 p 元素不会触发警告框。这是因为 jQuery 在文档加载完成时已经缓存了 p 元素的引用列表，它并不知道我们添加了一个新的 p 元素。
解决方案
为了解决这个问题，我们需要使用一种不同的方式来选择动态创建的元素。jQuery 提供了几种方法来选择动态创建的元素，以下是其中两种方法：
方法一：使用 .on() 方法
使用 .on() 方法可以绑定事件处理程序到父元素上，该父元素包含动态创建的元素。例如，我们可以更改之前的示例代码，如下所示：
-- -------------------- ---- ------- --------- ----- ------ ------ -------------- ------------ -------- ----------------------------------------------------------- ------- ------ ----- --------------------- -------- ------------------- ---------------- --------- ------------------------------ - ------------------------------------ - ---------------------------------- -------------- ------ ------------------------------ ---- ---------- - ---------------------- ------ ----- ---------- ------- -------
在这个示例中，我们使用了 .on() 方法来绑定 click 事件处理程序到包含动态创建的 p 元素的容器 div#container 上。当用户单击任何 p 元素时，事件会冒泡到容器上，触发事件处理程序。由于我们使用了选择器 "p"，因此只有被点击的 p 元素才会触发事件处理程序。
方法二：使用 .delegate() 方法
另一种选择动态创建的元素的方法是使用 .delegate() 方法。.delegate() 方法与 .on() 方法类似，但它是在 jQuery 1.7 之前引入的，因此它可能不再受支持。以下是一个使用 .delegate() 方法的示例代码：
<!DOCTYPE html> <html> <head> <title>jQuery demo</title> > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/13479) ，转载请注明来源 [https://www.javascriptcn.com/post/13479](https://www.javascriptcn.com/post/13479)
