JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<div class="parent">
    <button class="clickMeClass" id="clickMeId">
        Click Me
    </button>
</div>

JavaScript

// noted that, code below was wrap in head
// not before </body> tag
$(document).on('click', '.clickMeClass', function() {
    console.log('This is working fine even we register click handler inside head section,because we delegate the parent to document itself.');
});

$('.parent').on('click', '#clickMeId', function() {
    console.log('This is not working inside head section even using delegation on parent element, because this script try to find .parent element which is not loaded yet.');
});

$( function () {
	$('.parent').on('click', 'button', function() {
    	console.log('This is working fine even we register click handler inside head section, because this code run when document was completely ready rendered the DOM, mean that .parent element already rendered');
	});
})