Question

I can’t believe I’m asking this, but can’t find a clear answer about it. My UL starts with two items in it, and is being further populated by way of an AJAX call. I simply want to have the returned items appended to that UL, and have them “clickable” like the two that are already there.

I’ve seen a dozen different complicated, convoluted answers involving BIND, LIVE, DELEGATE, MAP – all with discussion about why the others should not be used. While those dicussions all have value (I’m sure), none of them seem to give a clear answer about something as (seemingly) simple as this. Surely there is a straight forward method of appending an LI, and having it use the .click() event that has been defined for the list.

$.each(api, function(i,item) {
    var listItem = "<li meeting_id='" + item.meeting_id + "'>" + item.meeting_name + "</li>";
    $("#MeetingList").append(listItem);
    /*Do Something here to bind the newly appended LI to the existing click event */
}

Answer 1

You need to use delegate (deprecated in favour of on in jQuery 1.7+) to have click handlers function for elements added to the dom after the even handler was bound. The code you posted for adding elements is fine. The code that needs to change is wherever you’re binding your click handler.

Instead of

$('ul li').click(function () { ... });

You’ll need to use

$('ul').delegate('li', 'click', function () { ... });

or, in jQuery 1.7+,

$('ul').on('click', 'li', function () { ... });