jquery select appended elements

Question

Faced with a problem that jquery doesn't allow to select appended element. I've seen a lot of advices how to solve it. For example:

var $li = $('<li><span>' + html + '</span></li>');
$('.top').append($li);

But it can't help me in my way. I get from server list of records from database in json format and in my view and I loop by this list and generate some html structure.

For example:

$.getJSON( "/searchbytype", data, function( data ) {
    $.each( data, function( key, val ) {
        $('items').append('<li class="item">'+ val.name + '</li>');
    });
});

And what I want to do next is click on some li item and to do some manipulation. Ul list may contain 100-200 li tags. Any ideas would be appreciated!

[Event Delegation](http://learn.jquery.com/events/event-delegation/) — Arun P Johny, Oct 04 '14 at 13:53
I should have looked for a duplicate before answering. Pretty sure there would be at least one. — emerson.marini, Oct 04 '14 at 14:00

Amit Joki · Accepted Answer · 2014-10-04T14:06:10.720

3

I think you need event-delegation

$('body').on('click', 'li', function(){
   // this handler will work even for dynamically created <li>
});

edited Oct 04 '14 at 14:06

answered Oct 04 '14 at 13:54

Amit Joki

58,320
7
77
95

So simple, thank you! But it started to work when I reordered li and click: $('body').on('click', 'li', function(){ – user3673623 Oct 04 '14 at 14:04
@user3673623 ah! Yes, swapped both. – Amit Joki Oct 04 '14 at 14:06

emerson.marini · Answer 2 · 2014-10-04T13:58:28.020

You can do it like this:

$.getJSON("/searchbytype", data, function (data) {
    $.each(data, function (key, val) {
        $('<li>', {
            class: 'item'
        }).html(val.name).on('click', function () {
            // Your code here.
        }).appendTo('.items');
    });
});

Note: I'm assuming the container is an element with class equals items, so I've added a missing . to prefix it in the jQuery selector.

jquery select appended elements

2 Answers2