给li分配id属性无效

Question

我在网页上有两个无序列表（UL），分别为 UL1 和 UL2。两个列表都是可排序和可拖拽的。当从 UL1 中的 LI 添加到 UL2 时，将会从 UL1 移除该 LI。为了从 UL2 删除该 LI，用户需要点击 LI 内部的删除链接。逻辑是删除该项，并将其从 UL2 添加回到 UL1。

以下是我的代码：

$(".xOut").on("click", function(){
        var id = $(this).attr('id');
        $.ajax({

            url: '@Url.Action("RemoveCommand")',
            type: "POST",
            data: {
                aid: id,
                bId: @(Model.Id)
            },
            success: function(event, ui){
                var newListItem = $("<li />", {
                    html: $("#"+id).html()
                });

                $(newListItem).attr("id", id);

                newListItem.appendTo("#sortable1");
                $("#"+id).remove();
            }
        });
    });

如果我不添加这一行代码，程序可以正常工作：

$(newListItem).attr("id", id);

我需要给新项目添加一个ID，否则它将无法正常工作。

如何解决这个问题？

更新：以下是HTML代码：

<ul id="sortable1" class='droptrue'>
 @for (var i = 0; i < Model.SomeList.Count(); i++)
 {
     var item = @Model.SomeList.ElementAtOrDefault(i);
     if (item != null)
     { 
        <li id="@(item.Id)">
           <div>@item.Name</div>
       </li>
     }
 }
</ul>

<ul id="sortable2" class='droptrue'>
     @for (var i = 0; i < Model.SomeAssignedList.Count(); i++)
     {
         var item = @Model.SomeAssignedList.ElementAtOrDefault(i);
         if (item != null)
         { 
            <li id="@(item.Id)">
           <div>@item.Name</div>
           </li>
         }
     }
    </ul>

- jmogera

Answer 1

不需要创建新项并移除旧项，只需将其移动：

$(".xOut").on("click", function(){
  var id = $(this).attr('id');
  $.ajax({
    url: '@Url.Action("RemoveCommand")',
    type: "POST",
    data: {
      aid: id,
      bId: @(Model.Id)
    },
    success: function(event, ui){
      $("#sortable1").append($("#"+id));
    }
  });
});

- Guffa

Answer 2

我不确定为什么这涉及到一个ajax调用，但无论如何--为什么不在添加具有相同id的新项目之前先删除旧项目呢？

- CodeClown42

---

这将是相同的，因为jQuery支持具有相同id的多个元素。 - Derek 朕會功夫

我的观点是，在原始代码中，创建了一个具有该ID的新元素并将其附加到某个位置，然后在该ID上调用remove()，可能会删除旧元素和新元素;) - CodeClown42