将 id 属性分配给 li 不起作用

Question

我的页面上有两个UL。UL1 和 UL2。两者都是可排序和可拖动的。当 UL1 中的 LI 添加到 UL2 时，LI 将从 UL1 中移出。要从UL2中删除，用户单击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>

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));
    }
  });
});

Answer 2

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