jQuery - bind an event to each element in a dynamically generated list

Question

I have several li elements that get added to a ul list dynamically. In each of the li elements, there's a button. I want to attach a click event to each button, and within the event handler, I want to get properties unique to the li whose button was clicked.

This (non-functional) code illustrates what I want:

$('ul > li > button').each('click', function(){

    var asdf = $('somehow access any arbitrary element in the li whose button was clicked').html();

});

My current solution (below) works, but it forces me to set an id for each li that indicates its position in the list, which for various reasons I'd rather not do.

// In the response function of the AJAX call that populates the list:

$('ul > li').each(function(i){
  $('button', this).click(function(){

    var name = $('ul > li#item'+i+' > .name').html();

  });
});

Is there a better way?

Try `$('ul').find('li').forEach(function(item) { $(item).find('button').click(...);})) ` — AlexD, Jan 15 '16 at 20:01
Possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Andreas, Jan 15 '16 at 20:02
@Andreas: The snag here is that I need access to all elements of the li, of which button is only one. Using the solution offered in that question, wouldn't I just have access to the button's context? — Tyler, Jan 15 '16 at 20:12
No -> `$("ul").on("click", "button", function(e) { var btn = $(this), li = button.closest("li"); ... })` — Andreas, Jan 15 '16 at 20:15
I agree with @Andreas suggestion of using the on() function. — Omar Yafer, Jan 15 '16 at 20:32
However the right solution has been initially proposed by @DinoMyte. — Nikolay Ermakov, Jan 15 '16 at 20:38

score 3 · Answer 1 · answered Jan 15 '16 at 20:15

You need to delegate the click event by using .on() instead of binding the click event when the elements are dynamically created in the DOM.

 $(document).on("click", 'ul',function(){    
    var name = $(this).find('li#' + num).html();
    alert(name);
  });

Working example : https://jsfiddle.net/DinoMyte/Lkb0s60n/

Event delegation refers to the process of using event propagation (bubbling) to handle events at a higher level in the DOM than the element on which the event originated. It allows us to attach a single event listener for elements that exist now or in the future.

Source : https://learn.jquery.com/events/event-delegation/

GeorgeGeorgitsis · Accepted Answer · 2016-01-15T20:11:27.800

0

I would recommend something like

$('ul > li > button').click(function(){
    var parent_li = $(this).parents('li'); //You can use class of li.
    var name = parent_li.html(); // Or whatever you want. In this case $(this) is the clicked element
});

edited Jan 15 '16 at 20:11

answered Jan 15 '16 at 20:01

GeorgeGeorgitsis

1,262
13
29

The problem with this approach is that I would only have access to the button's context, whereas I need access to the whole li. Maybe I could do something with outerHTML, but that seems like a bad idea. – Tyler Jan 15 '16 at 20:09
Didn't understand that before. Check my edit. Hope this helps – GeorgeGeorgitsis Jan 15 '16 at 20:11
D'oh. parents() was what I needed. Combined this with .on() so I don't need to do it in the ajax response. – Tyler Jan 15 '16 at 20:21
This solution won't work if you add any `li`s after appending this `click` event. You need the @DinoMyte solution. – Nikolay Ermakov Jan 15 '16 at 20:22
@Ermakov yes of course, but he can set a class in parent
and use parents() with that class. It depends on what Tyler needs.

GeorgeGeorgitsis

Jan 15 '16 at 20:24

I thought he needed what he wrote in the first line: `I have several li elements that get added to a ul list dynamically`. How this solution will work if a new `li` is added? – Nikolay Ermakov Jan 15 '16 at 20:26

But the button belongs to the new dynamically added

elements, so parents() will find the desired. But as i said before, he can set a specific class to the

he wants to capture and use that class in parents().

– GeorgeGeorgitsis Jan 15 '16 at 20:30

score 0 · Answer 3 · answered Jan 15 '16 at 20:12

JSFiddle

JS:

// In the response function of the AJAX call that populates the list:
jQuery('ul > li').each(function(i){
  jQuery('button', this).click(function(){

    var name = $(this).text();
    var className = $(this).attr("class");
// e.g. "1" or "2"    
console.log(name);
// e.g. "one" or "two"    
console.log(className);    
  });
});

HTML:

<ul>
  <li>
    <button class="one">1</button>
  </li>
  <li>
    <button class="two">2</button>
  </li>
  <li>
    <button class="three">3</button>
  </li>
</ul>

Omar Yafer · Answer 4 · 2016-01-15T20:34:45.627

The click() function will only bind itself to the items present in the DOM at the moment where the document is loaded. What you need to use is jQUery's on() function.

For on() to work you need an element that exists in the DOM when the script is loaded in this case

<ul class="myList">

With the on() function you add the click event to the selected elements inside the UL.myList. The code

$('.myList').on('click', 'li > button', function(){...});

Would be bindind the click event to all buttons inside an li , that are present inside your UL.myList. These will be binded even if the li>button elements are added after an AJAX call

Example:

(function($) {
  $(document).ready(function() {
    $('#addLi').on('click', function() {
      $(".myList").append($('<li  data-mydata="The new one"><button type="button">btn</button></li>'));
    });

    $('.myList').on('click', 'li > button', function() {
      var thisButton = $(this); //Get the button that was clicked
      var prnt = thisButton.parent(); //Get its parent
      var msg = "I was clicked" + thisButton.prop('tagName') + " My parent is " + prnt.data('mydata'); //Retrieve data of the parent
      alert(msg);
    });
  });
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="myList">
  <li data-mydata="The one">
    <button type="button">btn</button>
  </li>
</ul>

<button type="button" id="addLi">Add LI</button>

jQuery - bind an event to each element in a dynamically generated list

4 Answers4