0

我有一个简单的无序列表，它是通过$.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>

但相反，什么也没有发生（甚至没有控制台日志）。我错过了什么？

4

5 回答 5

3

由于.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>');
});
于 2013-01-16T23:11:08.753 回答
1

如果#simpleList在您绑定事件时在页面上并且不会消失，您可以这样做

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

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

于 2013-01-16T23:11:26.927 回答
1

您可以使用 直接将它们移动到另一个列表.append()。

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

正如其他人所说，用于.on()委托事件。.on()将适用于未来以及当前的元素。

看这里！

于 2013-01-16T23:14:00.400 回答
0

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

$('#simpleList').on('click','li', function() {
    console.log('click registered');
    $('#selectedList').append(this).show();
});
于 2013-01-16T23:11:36.710 回答
0

使用on而不是live. 这就是为什么。

此外，您需要在 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)
}
于 2013-01-16T23:11:43.593 回答