JSFiddle - React, Tailwind, and code Playground
HTML
Simple : $.on example Click will not work for new Links
<div id="anchorHolder">
<a class="simple" href="#">Click me</a>
<a class="simple" href="#">Click me</a>
<a class="simple" href="#">Click me</a>
</div>
<button id="add">Add more link</button>
<br />
<br .>
Complex : $.on example Click will work for new elements too
<div id="complexAnchorHolder">
<a class="complex" href="#">Click me</a>
<a class="complex" href="#">Click me</a>
<a class="complex" href="#">click me</a>
</div>
<button id="add2">Add more link</button>
CSS
a{
display:block;
margin-bottom: 5px;
}
JavaScript
$(function(){
$('a.simple').on('click',function(){
alert('I was clicked');
return false;
});
$('#add').on('click',function(){
$('a.simple').first().clone().html('I am added Later. Clicking me wont work.').appendTo('#anchorHolder');
});
$(document).on('click','a.complex',function(){
alert('I was clicked');
return false;
});
$('#add2').on('click',function(){
$('a.complex').first().clone().html('I am added Later but Clicking me still works').appendTo('#complexAnchorHolder');
});
});