jQuery onclick 不会在动态插入的 HTML 元素上触发 - Javascript

在使用 jQuery 的时候，我们有时需要动态地向页面中添加 HTML 元素，但是在这些新添加的元素上绑定事件时，有时会出现点击事件无法触发的问题。

例如：

<div id="container">
    <button id="btn">click me</button>
</div>

<script>
  $("#btn").on("click", function() {
      alert("clicked");
  });

  $("#container").append('<button id="newBtn">new button</button>');
</script>

上面的代码中，我们在页面中添加了一个按钮，并且为它绑定了一个点击事件。但是在添加了一个新的按钮后，并没有为新按钮绑定事件，因此点击新按钮时并不会触发任何事件。

要解决这个问题，可以使用 jQuery 提供的事件委托（event delegation）机制。

什么是事件委托？

事件委托是指将事件的处理程序绑定到祖先元素上，而不是直接绑定到子孙元素上。

例如：

<div id="container">
  <button id="btn">click me</button>
  <button id="newBtn">new button</button>
</div>

<script>
  $("#container").on("click", "#btn", function() {
      alert("clicked");
  });
</script>

上面的代码中，事件处理程序被绑定到 #container 元素上，而不是 #btn 元素上。当点击 #btn 元素时，事件会向上冒泡到 #container 元素，由于 #container 元素绑定了点击事件，因此会触发绑定的事件处理程序。

如何使用事件委托？

在 jQuery 中，可以使用 .on() 方法来实现事件委托。

$(selector).on(event, childSelector, data, handler);

• selector：要绑定事件的元素。
• event：要绑定的事件类型。
• childSelector：要绑定事件的子元素选择器。
• data：传递给事件处理程序的额外数据。
• handler：事件处理程序。

例如：

<div id="container">
  <button id="btn">click me</button>
  <button id="newBtn">new button</button>
</div>

<script>
  $("#container").on("click", "#btn", function() {
      alert("clicked");
  });
</script>

上面的代码中，我们为 #container 元素绑定了一个点击事件，并且指定了要绑定事件的子元素选择器为 #btn。当点击 #btn 元素时，会触发点击事件处理程序。

同样地，我们也可以在动态添加的元素上使用事件委托。

<div id="container">
    <button id="btn">click me</button>
</div>

<script>
  $("#btn").on("click", function() {
      alert("clicked");
  });

  $("#container").append('<button id="newBtn">new button</button>');

  $("#container").on("click", "#newBtn", function() {
      alert("clicked new button");
  });
</script>

上面的代码中，我们为 #container 元素绑定了一个点击事件，并且指定了要绑定事件的子元素选择器为 #newBtn。当点击新添加的 #newBtn 元素时，会触发点击事件处理程序。

总结

使用事件委托是解决动态插入元素的事件绑定问题的有效方法。通过将事件处理程序绑定到祖先元素上，可以确保所有子元素都能够被正确地处理事件。