Bind click event on dynamically added element HTML tags.
Here this article explains how to add click event for dynamic added element. In
jQuery for click event we can simply use .click() method which works
fine, but when you add dynamic HTML and try to achieve click event for it, then
there you face problem .i.e .click() is not working. Yeah you are right
.click() is not working because it’s not loaded on dom , so now what we are
going to do is we use .on() method which is added in jQuery v 1.7.
The .on() method attaches event handlers to the
currently selected set of elements in the jQuery object.
Prototype : .on( events [, selector ] [, data ], handler )
Description: Attach an event handler function for one or
more events to the selected elements.
Example 1: Click event for dynamically added li tags
HTML Markup:
Here we having UL list tag and then dynamically LI tag
gets added. So now how to achieve click event on this dynamically added element
in Jquery.
XHTML:-
<ul id="myUL"> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> </ul>
Here myUL– is the id which is already there on dom when
the page loads.
JavaScript:
Now by using .on() will able to bind the click event on
dynamically added HTML tag .i.e click event for dynamic li tags.
<script type="text/javascript"> $('#myUL').on('click', 'li', function () { console.log('you clicked me'); alert("Clicked"); }); </script>
Example 2: JQuery click event for dynamically added row and divs .i.e.
tr
HTML Markup:-
Here we have HTML table, and dynamically tr table rows get added, so now we want
to bind click event for dynamic tr table rows using jQuery .on() method
XHTML:-
<table id="myTable"> <tr> <td>row 1 col 1</td> <td>row 1 col 2</td> </tr> <tr> <td>row 2 col 1</td> <td>row 2 col 2</td> </tr> </table>
JavaScript:
Here myTable is my table id, and on each dynamically
added trwe can bind click event as shown in below code.
<script type="text/javascript"> $('#myTable').on('click', 'tr', function () { alert($(this).text()); }); //Same for div //Note: .itemName is the class of dynamically added element under parent div container .i.e myDIv $('#myDiv').on('hover', '.itemName', function () { alert($(this).text()); }); </script>
Here myDiv – is parent Div id, .itemName- each span
which have itemName call will alert its data.
For older jQuery library – 1.7
We can use .live() (method is deprecated in 1.7 and
removed in 1.9)
Prototype : .live(events, handler )
Description: Attach an event handler for all elements
which match the current selector, now and in the future.
JavaScript:-
<script type="text/javascript"> $('#myUL li').live('click', function () { alert('hello!'); }); </script>
Note: Use of the .live() method
is no longer recommended since later versions of jQuery offer better methods
that do not have its drawbacks.
Hope you enjoyed this tutorial. If you have any
recommendations, please let us know what you think in the comment section
below! See you again next time!
Thanks for comments.....