Question

好的朋友们。我需要你的想法。代码有两个简单动作。第一个操作在单击后添加ADD。第二个动作单击任意数字的X.现在调用了第二个动作。代码应该只打印一次！一个工人不读的东西有一个电话几次！任何人都可以解释原因吗？

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

＆＃13;

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());
    })
  })
})

＆＃13;

<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>

＆＃13;

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！这里有一个新的事件处理程序！”。

Answer 2

您正在为每个btn_x项创建一个侦听器，而不是仅为新创建的项添加侦听器。尝试将类名更改为btn_1，btn_2等等：

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

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

Answer 3

我不确定你在问什么，但这可能会有所帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 4

对于#add或#item，有一个双重调用。当你只想调用一个时，你的监听器函数会调用它们。必须再次检查您的代码。我希望你明白我的观点。

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

4 个答案: