When we have some dynamic element in our HTML code which are generated using some Javascript or jQuery code, and we want to add some event handling like click, blur, etc. to it, it won't work. And if you are reading this, that means you already know it doesn't work.
Well, the reason for this is pretty simple. Because the HTML element was dynamically generated or created at runtime, it is not part of the actual DOM, which means if you see the Page source of your HTML webpage, you will not find that particular element, and hence jQuery too faces trouble searching for it.
This can generally happen to load more elements, for example in the infinite scroll use case, as a user scrolls to the bottom, more posts are loaded, now these posts(or HTML elements) are added dynamically to the webpage, hence, if there is any event binding, it will not work.
Here's the Solution:
As of jQuery 1.7, you should use jQuery.fn.on which is on event handler, and then specify the dynamic element and the event to be bind inside it.
$(staticAncestors).on(eventName, dynamicChild, function() {});
What we are doing in the code above, is called event delegation. The event is attached to a parent HTML element (staticAncestors in the code above) of the dynamic element.
The above event handling code gets triggered, whenever the event is recorded for either the parent element or any of its child elements(static or dynamic). Once inside this event handling, it's checked, whether the event was for the dynamic child, if yes, then the consecutive function is executed.
This is the best way to bind events on dynamically generated HTML elements using jQuery.
Let's take a code example.
Here is a sample HTML code, with a parent HTML element with id iAmParent and there is no child to it as the child gets added dynamically, but the let's assume the child will have id iAmChild.
<div id="iAmParent">
<!-- The child element gets added here -->
</div>
Now rather than adding the even handling directly on the child element, we will be doing it using the parent element, like this:
$("#iAmParent").on(eventName, "#iAmChild", function() {
// code here
});
The eventName can be click event, blur event, or any other standard event supported in Javascript.
How to do event handling for dynamic elements with no parent elements?
If your HTML element has no direct parent HTML element, then either you can take the HTML <body> tag as the parent element or we can also apply the on() handling on the document object.
Using the <body> tag as a parent:
$("body").on(eventName, "#iAmChild", function() {
// code here
});
Using the document object as a parent:
$(document).on(eventName, "#iAmChild", function() {
// code here
});
Both of the above approaches will work if you are not sure which parent element to use to bind events to your dynamic element.
How to trigger Click event on Dynamic elements using jQuery?
Here is how you can do it for the click event specifically,
$("#iAmParent").on('click', "#iAmChild", function() {
// code here
});
Should I use the jQuery.live() function for dynamic element event handling?
Using live() it is possible to bind events to dynamically generated HTML elements, but it's the old way of doing so. Here's how it works:
$(selector).live( eventName, function(){
// your code here
});
But it is not recommended because, live() got deprecated in jQuery version 1.7 in favour of the on(), and is completely removed now since version 1.9.
So no point using it.
Conclusion:
Well in this article we learned how to handle events on dynamically generated HTML elements using jQuery. We also got to know about some alternatives like the live() function but it is deprecated now, hence the right way is using on() in jQuery.
If you have any doubt, go ahead and post a comment and I would be happy to help.
You may also like:
