好的 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>
最佳答案
问题是每次单击 #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!这里有一个新的事件处理程序供您使用!”。
关于javascript - 点击后。一个函数被多次调用……为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44207916/