jQuery appending li to ul unclickable

Question

У меня есть following code, который добавляет данные в неупорядоченные списки. Хлопотно код выглядит следующим образом:

$('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); 
});​ 

Если нажать на одну из опций в первой ул, данные добавляется ко второму ул. Однако элементы списка под этой ul не могут быть интерактивными, и мне нужно, чтобы они были такими, чтобы «цепочка» могла быть продолжена.

Где ошибка? Любая помощь приветствуется. Заранее спасибо.

Answer 1

Try с: (если вы используете JQuery больше, чем 1.6.8.)

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

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

Answer 2

Я могу предположить, судя по вашему коду, что вы ожидаете, что только что добавленный li наследует поведение, которое вы добавляете к существующим. К сожалению, он не может работать с написанным таким образом кодом.

Вам нужно прикрепить событие щелчка «наблюдаемым» способом, так что вновь добавленные элементы в dom получат обработчик события.

Для этого вы должны использовать метод .on. Вы можете проверить его ссылка here