jQuery add click event for dynamic Li, Div, table row, button

/ / 10 Comments

jQuery Dynamic Click Event:  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 we add dynamic HTML and try to achieve click event for it, then there we face problem .i.e jQuery .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 have UL list tag and then we dynamically add LI tag. So now how to achieve click event on this dynamically added element in jQuery.

<ul id="myUL">
 <li>One</li>
 <li>Two</li>
   .......
   .......
</ul>

Here myUL- is the id which is already available on DOM when the page loads.

jQuery: Now by using .on() will able to bind the click event on dynamically added HTML tag .i.e click event for dynamic added Li tags.

$('#myUL').on('click','li', function(){
    console.log('you clicked me');
});

 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 added tr table rows using jQuery .on() method

<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>

jQuery : Here myTable is my table id, and on each dynamically added tr we can bind click event as shown in below code.

$('#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() );
});

Here myDiv - is parent Div id,  .itemName- each span which have itemName call will alert its data.

View Demo

Here in the demo we successfully add dynamic rows to our HTML table .i.e, myTable with some dummy data and a select button. On button click we alert the selected table row 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.

//*
$('#myUL li').live('click', function() {
  alert('hello!'); 
});
//*

 Note:  Use of the .live() method is no longer recommended since later versions of jQuery offer better methods that do not have its drawbacks.

Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.

PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee

Subscribe to our newsletter

Get the latest and greatest from Codepedia delivered straight to your inbox.


Post Comment

Your email address will not be published. Required fields are marked *

10 Comments

  1. suman 07/07/2016 10:35:56
    thanks a lot
  2. udeme samuel 07/30/2016 08:01:32
    I still have issues with this i am trying to achieve the like and dislike button, this is my question on stackoverflow (http://stackoverflow.com/questions/38665474/onclick-does-not-work-after-inserting-html-to-the-dom)
  3. Salvatore 08/15/2016 20:29:54
    Really great, thanks so much!
  4. Karen González 05/17/2017 23:38:24
    Thank you so much!! I have been searching this for an hour :)
  5. Satinder singh 05/22/2017 12:04:26
    Am glad Karen, that you find it helpful
  6. karam 07/08/2017 22:54:44
    Hi, first of all I read what you wrote above as reading a story, so good and nice explain thumbs up for you now my question what if i want to send parameters with differt values for each element that dynamiclly added, how do i dont that?
  7. Satinder singh 07/11/2017 06:30:05
    Hi Karam, Thanks for reading, and yes you can send parameter, good way is to set html5 data-* and get this value on click
  8. Julien 06/06/2018 10:31:03
    Hey there ! Thank you for this great explaination, it helped me alot :)
  9. Bud Hines 02/08/2021 13:01:52
    Thank you so much for providing this example. I was working with Jquery-modal form. I figured out how to add a create user on the main page. I also figured out how to add edit and delete buttons to each row, how to call the same dialog. I figured out how to modify the title based upon the button selected. I also figured out how to change the button text.

    But I could not figure out how to make the dynamically added buttons clickable. I searched articles and I read the documentation over and over.

    You saved my weekend! Thank you.

    I have a followup question. How did you arrive at this solution. Did reading the reference material just hit you in such a way that it made sense or did you see someone else's example?

    I am just asking because I am realizing that I need a faster way to uncover solutions to some of these more complex issues.

    Thank you again.
  10. Satinder singh 02/08/2021 14:28:15
    Hi Bud Hines

    Actually the idea to write this article comes, when while developing I face this issue. It takes me hours to fix this issue. So later after fixing it decided to post an article on it.
    Am glad you find this article useful, happy coding & keep visiting..