javascript - 点击后。一个函数被多次调用……为什么？

Question

好的 friend 们。我需要你的想法。代码有两个简单的 Action 。单击后第一个操作添加 ADD。第二个 Action 单击带有任意数字的 X。现在调用第二个 Action 。代码应该只打印一次!一个 worker 不读的东西有一个电话几次!谁能解释一下为什么？

我采用了相同的代码....与另一个带有 3 DIV 的 HTML 代码已经存在。并且代码工作正常。

var count = 1;
$(document).ready(function() {
  $("#add").on("click", function() {
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>');
    count++;

    $(".btn_x").on("click", function() {
      console.log($(this).html());
    })
  })
})

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button id="add">Add</button>
<div id="items"></div>

Answer 1

问题是每次单击 #add 时都会添加一个新的事件监听器。相反，您可以只监听父元素上的事件并从子元素中捕获元素。

var count = 1;
$(document).ready(function() {
  $("#add").on("click", function() {
    $("#items").append('<div><input/><button class="btn_x">X' + count + '</button></div></br>');
    count++;
  });
  
  // Listen to events on the parent element
  $("#items")
    // But only capture events from child elements with .btn_x
    .on("click", ".btn_x", function() {
      console.log($(this).html());
    });
});

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<button id="add">Add</button>
<div id="items"></div>

您可以这样想:每次 .btn_x 上发生事件时，它都会通知 #items。每当 #items 听到它时，它都会让您处理该事件，就像您直接收听 .btn_x 一样。

您的方法的问题在于，每次您单击 #add 时，您都在说“你们每个人 .btn_x!这里有一个新的事件处理程序供您使用!”。