在使用 jQuery 进行 AJAX 动态加载 HTML 元素时，可能会出现 click() 事件无法触发的情况。这是因为在页面初始加载时，jQuery 只会绑定已存在的元素，而不会对后来添加的元素进行绑定。本文将介绍如何解决这个问题。
背景
假设有一个简单的 HTML 页面，其中包含一个按钮:
------- ------------------- -----------
当用户点击该按钮时，我们希望弹出一个消息框。我们可以使用 jQuery 的 click() 方法来绑定点击事件：
-------------------------------- ------------- ----------- ---
然而，如果我们通过 AJAX 加载了另一个 HTML 文件，并将其插入到当前页面中，那么之前绑定的 click() 事件将不再起作用：
--------
---- ------------------
-------- ---------------
---------------------------
-
---其中 newContent.html 文件中包含另一个按钮:
------- -------------------- -- ------------
我们尝试对新的按钮进行事件绑定：
--------------------------------- ---------- ------ ----------- ---
但是，当用户点击新的按钮时，却没有任何反应。
解决方法
方法一：使用 on()
为了解决这个问题，我们可以使用 jQuery 的 on() 方法。它可以动态地为所有元素绑定事件，包括当前不存在的元素。
----------------------- ------------- ----------- ---------- ------ ----------- ---
此时，当用户点击新的按钮时，就会弹出消息框了。
方法二：在 AJAX 完成后重新绑定事件
另一种解决方法是在 AJAX 请求完成后，重新绑定 click() 事件。这个方法需要在 success 回调函数中执行：
--------
---- ------------------
-------- ---------------
---------------------------
---------------------------------
---------- ------ -----------
---
-
---这样做可以确保事件能够被正确地绑定。
总结
当使用 jQuery 进行 AJAX 动态加载 HTML 元素时，可能会遇到 click() 事件无法触发的问题。我们可以使用 on() 方法或在 AJAX 请求完成后重新绑定事件来解决这个问题。建议使用 on() 方法，因为它可以自动为所有元素绑定事件，并且代码更简洁。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28413