动态创建的元素上的事件处理程序？ [复制]答案

【问题标题】：Event handlers on dynamically created elements? [duplicate]动态创建的元素上的事件处理程序？ [复制]
【发布时间】：2017-06-14 18:27:53
【问题描述】：

$(document).ready(function () {

   $('.add-button').on('click', function () {
  
      $('.alert-button').after('<button type="button" class="alert-button">Click me! </button><br>');
  
  });
  

  $('.alert-button').on('click', function () {
  
    alert('HI!');
  
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type='button' class="alert-button">Click me! </button><br>
<button type="button" class="add-button">Add button!</button>

嗨！我的“$('.alert-button').on('click'...”代码适用于页面加载时创建的元素，但不适用于动态创建的元素。

所以我有一个带有 2 个按钮的页面（请运行上面的 sn-p）。如果你点击“点击我！”警报“嗨！”出现。

但是当我复制“点击我！”通过按“添加按钮”按钮，单击重复的“点击我！”不产生警报“嗨！” （虽然它也有“.alert-button”类）。

我想看到警报“嗨！”当我点击任何“点击我！”按钮。

我做错了什么？:)

【问题讨论】：

jsfiddle.net/fb3m2mex 是您要找的。span>
@maxshuty - 是的，确实如此！我在哪里可以阅读相关文档？我真的不明白事件处理程序在 js 中是如何工作的......
api.jquery.com/on 是一个好的开始。很明显，这是我们在这里做的 jQuery。基本上我认为你的困惑是你的处理程序适用于新元素，但实际上它只适用于页面上已经存在的元素，而不是新创建的元素。 :)
处理程序不能处理 HTML 字符串。您需要正式创建元素（通过document.createElement()），然后您可以将处理程序绑定到它。
@SergejFomin 见learn.jquery.com 了解一些见解

标签： javascript jquery dynamic event-handling

【解决方案1】：

只需替换这个函数：

$(document).on('click','.alert-button', function () {

    alert('HI!');

});

这也将在动态添加的元素上绑定点击事件。

【讨论】：

【解决方案2】：

点击处理程序只绑定到已经存在的元素。您需要将处理程序添加到动态创建的元素。在您的情况下，执行此操作的最佳位置是在创建新元素后的 .on 函数中。

【讨论】：

thanx，Ben，但我不明白如何在创建新元素后在 .on 函数中添加处理程序.....
after() 方法运行后，在下一行中，将事件处理程序分配给 .alert-button（或任何您喜欢的）。