我在 jquery 中做了一个简单的示例。在我的示例中,用户可以使用 add
添加多个条目按钮。
示例 "one","two" 。每个条目中有“X”文本。我正在“X”上绑定(bind)点击事件 span
。
https://jsfiddle.net/kzcozeeg/1/
问题事件被绑定(bind)多次为什么? 示例添加两个条目“一”和“二”。在第一个条目(一)上单击“X”。它显示控制台消息两次,为什么?
$(function() {
$('#btn').click(clickhandler)
function clickhandler(params) {
var user= $('.username').val();
var str = '<div><span>'+user +'</span> <span class="abc">X</span></div>'
$('#wrapper').append(str);
$('.abc').on('click',function () {
console.log($(this).prev('span').text())
})
}
})
谢谢
最佳答案
$(function() {
$('#btn').click(clickhandler)
function clickhandler(params) {
var user = $('.username').val();
var str = '<div><span>' + user + '</span> <span class="abc">X</span></div>'
$('#wrapper').append(str);
}
$('#wrapper').on('click', '.abc', function() {
console.log($(this).prev('span').text())
})
})
这样,您就可以处理动态元素上的点击事件(因为点击事件会冒泡)。
您的问题是因为每次点击 #btn
时,您都会在每个 .abc
元素上添加一个新的点击事件,而不会删除任何先前绑定(bind)的事件。
关于javascript - 为什么控制台消息显示多次?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40958758/