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

Question

我在jquery中做了一个简单的例子。在我的例子中，用户可以使用add按钮添加多个条目。 示例“one”，“two”。每个条目中都有“X”文本。我在“X”span上绑定了点击事件。 https://jsfiddle.net/kzcozeeg/1/

问题事件多次绑定为什么？ 例子在第一个条目（一个）上添加两个条目“one”和“two”.click“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())
         })
    }
})

由于