javascript - 将click绑定到dom中添加的元素，导致触发元素执行

Question

我在将元素添加到 dom 时将其与 click 函数绑定。我的问题是，如果我添加让我们说 3 个元素，然后我单击其中的任何一个，它会执行该功能 3 次。是什么让它触发了这 3 次，这可以通过其他方式完成吗？

让我在这里用一个 jsfiddle演示来说明它

html

<div id="breadcrumb"><a href="#" id="start" class="click-me">Start</a></div>
<a href="#" id="add_to_breadcrumb">Add to breadcrumb</a>​

jQuery

$('#add_to_breadcrumb').on('click', function(){
    $('#breadcrumb').append('<a href="#" class="click-me">' + $('#breadcrumb > a').size() + '</a>', bindClick());


});

function bindClick(){
    $(document).on('click', '.click-me', function(){
        alert($(this).text());        
    });        
}

Answer 1

试试这个：

$('#add_to_breadcrumb').on('click', function() {
    $('#breadcrumb').append('<a href="#" class="click-me">' + $('#breadcrumb > a').size() + '</a>');
});

$(document).on('click', '.click-me', function() {
    alert($(this).text());
});

演示

每个追加的绑定click事件，导致每次追加一次又一次地绑定到每个元素。