id属性をliに割り当てても動作しません

Question

私のページには2つの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？代わりに、新しいアイテムを作成し、古い項目を削除する