Detecting which list element was clicked using jquery (list is added dynamically)

Question

Case1: List is present in the html already

<ul id="list1">
    <li>One</li>
    <li>Two</li>
</ul>

The clicked li element is detected using

$('#list1 li').bind('click', function(){
   alert($(this).html());
});

Above works fine.

Case 2:

Now if the list is added dyamically

<div id="testDiv">
</div>

var output = '<ul id="list1">' +
             '<li>One</li>' + 
             '<li>Two</li>' +
             '</ul>';

$('#testDiv').html(output);

I try to detect the clicked li element using same code

$('#list1 li').bind('click', function(){
    alert($(this).html());
});

In this case, it does not detect

did you add jQuery in your page? Did you put the script in a dom ready handler? is there any error in your browser console? — Arun P Johny, Feb 13 '14 at 23:21
option 1 should work fine http://jsfiddle.net/arunpjohny/T6CVD/1/ — Arun P Johny, Feb 13 '14 at 23:22
Are you creating these elements dynamically? If so, see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements — Barmar, Feb 13 '14 at 23:22
Are you remembering to put option 1 inside a document ready? — Adam Merrifield, Feb 13 '14 at 23:22
@Barmar Actually I'd use event delegation: `$('#list1').on('click', 'li', ...)` — Alnitak, Feb 13 '14 at 23:22
@user544079 that makes event delegation an even more attractive proposition, especially if the `#list1` element is always present and it's only the contents of it that change dynamically. — Alnitak, Feb 13 '14 at 23:27
@Barmar oh, and please don't link to that question - it's very old and the top rated answers are all very out of date, recommending obsolete methods of performing event delegation. — Alnitak, Feb 13 '14 at 23:29
@Alnitak Got a better one for me to link to? I'll replace my bookmark. — Barmar, Feb 13 '14 at 23:30

Alnitak · Answer 1 · 2014-02-13T23:53:12.050

Assuming that you've got jQuery correctly loaded, and that you put your jQuery related code in a "document ready" handler, I'd recommend "event delegation", such that you just register a single event handler on a static ancestor element.

Clicks received in the li descendants will "bubble up" to the ancestor element, but jQuery will ensure that this is set to the element that was actually clicked:

$('#testDiv').on('click', 'li', function() {
    console.log(this);
});

So long as the static ancestor remains present on the page you can dynamically change its contents as much as you please and the event handler will continue to work.

Detecting which list element was clicked using jquery (list is added dynamically)

1 Answers1

Linked

Related