javascript - 创建元素并将事件设置为类时，JQuery 会重复事件

Question

当我使用单击事件添加项目并存在具有相同类的另一个元素时，该事件会重复。

$(".add-first").on("click", function() {
  var firstContainer='<div class="second-container"><button class="add-second">add second</button></div>';
  $(this).closest(".first-container").append(firstContainer);
  $(".add-second").on("click", function() {
    $(this).closest(".second-container").append("<br>example");
  });
});
$(".add-second").on("click", function() {
    $(this).closest(".second-container").append("<br>example");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first-container">
  <button class="add-first">add first</button>
  <div class="second-container"><button class="add-second">add second</button></div>
</div>

然后，当我在添加第一个中按一次单击时，每个按钮中的重复事件添加第二个，然后当我在第二个按钮上单击时，它会发生一些事件，问题是重复的事件。

Answer 1

尝试实现event-delegation而不是每次创建新按钮时都绑定(bind)事件事件，

$(".add-first").on("click", function() {
  var firstContainer = '<div class="second-container"><button class="add-second">add second</button></div>';
  $(this).closest(".first-container").append(firstContainer);
});

$(".first-container").on("click", ".add-second", function() {
  $(this).closest(".second-container").append("<br>example");
});

DEMO