34
loading...
jQuery : Adding Event Listeners to HTML elements even before they are rendered
This article will help you setup event listeners for dynamic elements on the webpage using JQuery.
Basic knowledge of JQuery Selectors, Basic event handling in Javascript
<html>
<head>
<!-- add jquery dependency -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
</head>
<body>
<div class="main">
<!-- button will appear here -->
</div>
<script>
let buttonHtml = `<button class="btn">Click to turn me RED</button>`
// add a button 1 second after document is loaded
$(document).ready(function () {
setTimeout(() => {
$(".main").append(buttonHtml);
}, 1000)
})
</script>
</body>
</html>This code just adds a button with class
btn inside our main div.// on click of our selector, turn our button RED
$(".btn").on('click', function(){
$(this).css('background','red');
})Well, See in action
// Taken from https://api.jquery.com/on/
Delegated event handlers have the advantage that they can process events from descendant elements that are added to the document at a later time.
So, all I had to do was add another parameter to our method and change the selector.
So Basically,
Tell our browser, that whenever there is a click event on our .main class element, check if it was made on the .btn specifically.
So I replaced my previous code with this.
$('.main').on('click','.btn', function(){
$(this).css('background','red');
})That was it. Boom!
Thanks for reading. Like and follow for more such articles.
Happy to engage in healthy discussion in comments.
Happy to engage in healthy discussion in comments.
34