jQuery click() 事件未在 AJAX 加载的 HTML 元素上触发

在使用 jQuery 进行 AJAX 动态加载 HTML 元素时，可能会出现 click() 事件无法触发的情况。这是因为在页面初始加载时，jQuery 只会绑定已存在的元素，而不会对后来添加的元素进行绑定。本文将介绍如何解决这个问题。

背景

假设有一个简单的 HTML 页面，其中包含一个按钮:

<button id="myButton">Click me</button>

当用户点击该按钮时，我们希望弹出一个消息框。我们可以使用 jQuery 的 click() 方法来绑定点击事件：

$('#myButton').click(function(){
  alert('Button clicked!');
});

然而，如果我们通过 AJAX 加载了另一个 HTML 文件，并将其插入到当前页面中，那么之前绑定的 click() 事件将不再起作用：

$.ajax({
  url: 'newContent.html',
  success: function(data){
    $('#container').html(data);
  }
});

其中 newContent.html 文件中包含另一个按钮:

<button id="newButton">Click me too</button>

我们尝试对新的按钮进行事件绑定：

$('#newButton').click(function(){
   alert('New button clicked!');
});

但是，当用户点击新的按钮时，却没有任何反应。

解决方法

方法一：使用 on()

为了解决这个问题，我们可以使用 jQuery 的 on() 方法。它可以动态地为所有元素绑定事件，包括当前不存在的元素。

$(document).on('click', '#newButton', function(){
  alert('New button clicked!');
});

此时，当用户点击新的按钮时，就会弹出消息框了。

方法二：在 AJAX 完成后重新绑定事件

另一种解决方法是在 AJAX 请求完成后，重新绑定 click() 事件。这个方法需要在 success 回调函数中执行：

-- -------------------- ---- -------
--------
  ---- ------------------
  -------- ---------------
    ---------------------------
    ---------------------------------
      ---------- ------ -----------
    ---
  -
---

这样做可以确保事件能够被正确地绑定。

总结

当使用 jQuery 进行 AJAX 动态加载 HTML 元素时，可能会遇到 click() 事件无法触发的问题。我们可以使用 on() 方法或在 AJAX 请求完成后重新绑定事件来解决这个问题。建议使用 on() 方法，因为它可以自动为所有元素绑定事件，并且代码更简洁。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28413