Question

如何使用jQuery在无序列表中添加和删除项目？当我双击列表1中的项目时，它应该从列表1中删除并添加到列表2中当然，另一种方式也是......

我有以下列表：

<ul id='attached'>
  <li id='itemID_1' ondblclick='removeAttached(&#39;itemID_1&#39;)'>Item</li>
  <li id='itemID_2' ondblclick='removeAttached(&#39;itemID_2&#39;)'>Item</li>
  <li id='itemID_3' ondblclick='removeAttached(&#39;itemID_3&#39;)'>Item</li>
  <li id='itemID_4' ondblclick='removeAttached(&#39;itemID_4&#39;)'>Item</li>
</ul>

<ul id='non-attached'>
  <li id='itemID_5' ondblclick='addAttached(&#39;itemID_5&#39;)'>Item</li>
  <li id='itemID_6' ondblclick='addAttached(&#39;itemID_6&#39;)'>Item</li>
  <li id='itemID_7' ondblclick='addAttached(&#39;itemID_7&#39;)'>Item</li>
  <li id='itemID_8' ondblclick='addAttached(&#39;itemID_8&#39;)'>Item</li>
</ul>

我在想这样的事情：

<script type='text/javascript'>")
  function addAttached(i) { $('#non-attached').remove(i); $('#attached').append(i); };")
  function removeAttached(i) { $('#attached').remove(i); $('#non-attached').append(i); };")
</script>")

但我可能会离这儿很近？

Answer 1

如果你想来回移动，最好的选择是event delegation：

<ul id='attached'>
    <li id='itemID_1'>Item</li>
    <li id='itemID_2'>Item</li>
    <li id='itemID_3'>Item</li>
    <li id='itemID_4'>Item</li>
</ul>

<ul id='non-attached'>
    <li id='itemID_5'>Item</li>
    <li id='itemID_6'>Item</li>
    <li id='itemID_7'>Item</li>
    <li id='itemID_8'>Item</li>
</ul>

JS

$("#attached").delegate("li", "dblclick", function() {
    $("#non-attached").append(this);
});

$("#non-attached").delegate("li", "dblclick", function() {
    $("#attached").append(this);
});

这将检测到li元素上的点击，该点击会冒泡到您的列表中。然后它会将元素移动到另一个列表。

JSFiddle：http://jsfiddle.net/TYwPU/

Answer 2

您不需要remove元素，只需拨打appendTo：

$("#attached li").dblclick(function() {
    $(this).appendTo("#non-attached");
});
$("#non-attached li").dblclick(function() {
    $(this).appendTo("#attached");
});

这是一个working example。请注意，上面的代码应该放在ready事件处理程序中，它不需要内联事件处理程序。

根据评论

更新

因为元素已从DOM中删除并重新附加到其他位置，所以它会丢失绑定到它的事件处理程序。这意味着您需要使用jQuery live或delegate方法，这些方法将事件处理程序绑定到现在或将来与选择器匹配的元素：

$("#attached li").live("dblclick", function() {
    $(this).appendTo("#non-attached");
});
$("#non-attached li").live("dblclick", function() {
    $(this).appendTo("#attached");
});

Answer 3

首先，你应该避免编写内联JavaScript。这使得调试和维护代码库变得更加困难。我建议您阅读以下有关javascript事件的文章：

Quirksmode - Early Event Handlers

Quirksmode - Traditional event registration model

此类事件处理不应与jQuery混合使用。关注@ james-allardice示例并尝试了解如何正确使用javacript。我建议您阅读jQuery文档和教程here。

此外，如果您赶时间，可以尝试更具吸引力的JQuery UI Sortable lists。

如何使用jQuery从UL添加和删除LI？

3 个答案: