JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<button id="addElements">Add an element</button>
<ul id="output"></ul>
CSS
button {
display: block;
}
ul {
padding: 0;
list-style:none;
}
li {
float:left;
background:#eceded;
display: block;
width: 1.5em;
height: 1.5em;
margin: .5em;
cursor: pointer;
}
JavaScript
// container is your content's container
var container = $('#output');
// Bind the Ajax function to the button
$('#addElements').click(addElement);
function addElement() {
$.ajax({
url: "page.php",
success: function(html){
container.append(html);
}
});
}
// Delegate the click to the container
container.on('click', 'li', makeMeRed);
function makeMeRed() {
$(this).css('background', 'red');
}
/* Just a fake Ajax for the demo */
$.ajax = function(param){
setTimeout(param.success,200,'<li></li>');
};