javascript - 如何将函数绑定(bind)到任何 ajax 生成的列表项上的单击？

Question

我有一个通过 $.ajax 生成的简单无序列表...

<ul id="simpleList"></ul>

在 ajax 响应之后，它看起来像这样:

<ul id="simpleList">
    <li id="aaa">list item aaa</li>
    <li id="bbb">list item bbb</li>
    <li id="ccc">list item ccc</li>
</ul>

我需要将单击的列表项从此列表移动到另一个列表 (#selectedList)。

通常我会使用 .click 函数来处理这个问题，但由于初始列表项是通过 ajax 调用动态创建的，所以我开始使用 .live，但我仍然无法让它工作。这是我目前所处位置的示例。

$('#simpleList > li').live('click', function() {
    console.log('click registered');
    var contents = $(this).html();
    var listId = $(this).attr('id');
    $(this).remove();
    $('#selectedList').show();
    $('#selectedList').append('<li id="' + listId + '">' + contents + '</li>');
});

我期望最终结果如下:(假设单击了#aaa 列表项)

<ul id="simpleList">
    <li id="bbb">list item bbb</li>
    <li id="ccc">list item ccc</li>
</ul>
<ul id="selectedList">
    <li id="aaa">list item aaa</li>
</ul>

但是什么也没发生(甚至没有控制台日志)。我错过了什么？

Answer 1

由于 .live() 已弃用 .on()优先考虑

$('#simpleList').on('click', 'li', function() {
    console.log('click registered');
    var contents = $(this).html();
    var listId = $(this).attr('id');
    $(this).remove();
    $('#selectedList').show();
    $('#selectedList').append('<li id="' + listId + '">' + contents + '</li>');
});