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()已被弃用，因此首选<{3}}

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

Answer 2

如果您绑定事件时页面上有#simpleList且不会消失，则可以

$('#simpleList').on('click', 'li', myFunction);

如果不是，您应该选择一个父元素，或者将其连接到$(document)。

Answer 3

您可以使用.append()直接将其移至其他列表。

$('#simpleList').on('click', 'li', function() {
    $('#selectedList').append(this);
});

正如其他人所说use .on() for a delegated event。 .on()将适用于未来以及当前元素。

See it here!

Answer 4

你真的应该使用on而不是直播。您还可以使用append()轻松地将节点从一个父节点移动到另一个父节点。所以它可能看起来像这样：

$('#simpleList').on('click','li', function() {
    console.log('click registered');
    $('#selectedList').append(this).show();
});

Answer 5

使用on代替live。 Here is why。

此外，您需要在ajax调用成功后调用代码，例如：

$.ajax({
    url: 'someUrl',                
    success: function (html) {
       $('#simpleList > li').on('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>');
    });
    }
});

更新：您可以使用更少的代码移动它（见appendTo - 未经测试）

$('#simpleList > li').on('click', function() {    
            $(this).appendTo('#selectedList)
}

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

5 个答案: