javascript - 为什么控制台消息显示多次？

Question

这个问题已经有答案了:

Event binding on dynamically created elements? (23 个回答)

已关闭 6 年前。

我在 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())
         })
    }
})

谢谢

Answer 1

Delegate click event相反:

$(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)的事件。