How can I handle the dynamically populated ul li click event?

Question

I work with an authorization system. I have four unordered lists. Name them list1, list2, list3 and list4. two of them are about countries and the other two are about cities. list1 contains all countries. list2 contains all available countries for one employee. Users move one country from list1 to list2. when the user clicks list2, I can handle this event, and I populate the city of this country to list3 with jquery. This list of cities comes from the aspx web page. I want to handle the click4 event of a list. list4 contains all available cities for employees. I wrote these lines.

$('#clist2 li').click(function() {
    alert('test');
});

But I did not see the warning. How can I handle the click4 event of a list?

Answer 1

Here you can use .delegate(), for example:

$('#clist2').delegate('li', 'click', function() {
    alert('test');
});

$('#clist2 li')at this time it receives all the <li>elements inside #clist2, instead, you can directly bind a handler to #clist2that listens for events clickfrom any elements <li>(present or added later their events bubble the same way) to the bubble up .

Answer 2

You can use .live()it so that everyone ligets click events regardless of whether they exist during the binding or not (for example, the selector just needs to match).