在前端开发中，使用Ajax进行异步数据交互是非常常见的。然而，有时候我们可能会遇到一个问题：当Ajax请求完成后，相应的jQuery事件没有被触发。这个问题可能会让我们感到困惑，因为我们期望事件会在Ajax请求成功后立即触发。
问题原因
这个问题的原因在于我们可能没有正确地绑定事件处理程序。通常情况下，我们会在页面加载时为目标元素绑定事件，但是如果Ajax返回的内容包含新的HTML元素，并且这些元素需要绑定事件处理程序，那么我们就必须要重新绑定事件处理程序。
例如，考虑以下代码：
-- -------------------- ---- -------
---- -----------
------- -----------------------------
------
--------
------------ -
------------------------------- -
----------------
---
--------
---- ------------
-------- -------------- -
-----------------------
-
---
---
---------在这个例子中，我们为 .myButton 元素绑定了 click 事件处理程序。然后，我们使用 Ajax 请求来获取数据并将其插入到 #myDiv 元素中。如果返回的 HTML 中也包含一个 .myButton 元素，那么这个元素就不会有与之对应的点击事件处理程序。
解决方案
为了解决这个问题，我们需要在 Ajax 请求完成后重新绑定事件处理程序。我们可以通过以下方式来实现：
-- -------------------- ---- -------
---- -----------
------- -----------------------------
------
--------
------------ -
-------- ----------------- -
------------------------------- -
----------------
---
-
------------------
--------
---- ------------
-------- -------------- -
-----------------------
------------------
-
---
---
---------这里我们定义了一个名为 bindButtonClick 的函数，用于绑定 .myButton 元素的 click 事件处理程序。然后在页面加载时调用 bindButtonClick 函数来绑定事件处理程序。在 Ajax 请求成功后，我们再次调用该函数来重新绑定事件处理程序。
这种方法非常简单并且有效。它能够确保我们的事件处理程序始终与目标元素相关联。
总结
当使用 Ajax 进行数据交互时，我们需要注意重新绑定事件处理程序。否则，在请求完成后，我们可能会发现相应的 jQuery 事件没有被触发。通过在 Ajax 成功回调函数中重新绑定事件处理程序，我们可以轻松地解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24126