bind click to element added in dom, cause trigger element to perform
<p>I'm binding a element with a click function when its added to the dom. My issue here is that if i add lets say 3 elements, and i click any of those it performs that function 3 times. what is it that makes it trigger those 3 times and could this be done any other way?</p>

<p>let me illustrate it with a jsfiddle <a href="http://jsfiddle.net/Pcy2E/1/" rel="nofollow">demo here</a></p>

<p>html</p>

<pre><code>&lt;div id="breadcrumb"&gt;&lt;a href="#" id="start" class="click-me"&gt;Start&lt;/a&gt;&lt;/div&gt;
&lt;a href="#" id="add_to_breadcrumb"&gt;Add to breadcrumb&lt;/a&gt;​
</code></pre>

<p>jquery</p>

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


});

function bindClick(){
    $(document).on('click', '.click-me', function(){
        alert($(this).text());        
    });        
}
</code></pre>
