jQuery将li附加到ul unclickable

Question

我有以下代码将数据添加到无序列表。 麻烦的代码如下：

$('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中的某个选项，则会将数据添加到第二个ul。 但是，这个ul下的列表项是不可点击的，我需要它们，所以可以继续“链”。

这个bug在哪里？ 任何帮助将非常感激。 提前致谢。

Answer 1

试试:(如果你使用大于1.6.8的jQuery。）

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

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

Answer 2

我可以假设，根据您的代码判断，您希望新添加的li继承您附加到现有行为的行为。 不幸的是，它不能用这种方式编写的代码。

您需要以“可观察”的方式附加click事件，以便新添加到dom的元素将附加事件处理程序。

为此，您必须使用.on方法。 你可以在这里查看它的参考