jQuery appending li to ul unclickable

Question

i have the following code that adds data to unordered lists. The troublesome code is as follows:

$('li:not(:first-child)').click(function() {
    var clickedLi = this;
    $(this).parent().prepend(clickedLi);
    var selectedLi = $(this).text();
    alert(selectedLi);
 $(this).parent().parent().nextAll().children('ul').children().replaceWith('<li>Please select</li>');

    //ajax call
    var returnedData = "<li>Dataset1</li><li>Dataset2</li><li>Dataset3</li>";

    //populate next with returned data
    $(this).parent().parent().next().children('ul').append(returnedData);
});​

If you click on one of the options in the first ul, data gets added to the second ul. However, the list items under this ul are not clickable, and I need them to be so, so that 'chain' can be continued.

Where is the bug? Any help would be much appreciated. Thanks in advance.

Answer 1

Try with: (if you use jQuery greater than 1.6.8. )

$(document).on('click','li:not(:first-child)',function() {

http://api.jquery.com/on/