2012-04-15 5 views
3

У меня есть два UL на моей странице. UL1 и UL2. Оба являются сортируемыми и перетаскиваемыми. Когда LI из UL1 добавляется в UL2, LI выходит из UL1. Чтобы удалить из UL2, нажмите на ссылку удаления внутри LI. Логика удаляет элемент и добавляет его обратно в UL1 из UL2.Назначение атрибута id для li не работает

Это мой код:

$(".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); 

Мне нужен новый элемент имел идентификатор, и не может работать без этого.

Как это сделать?

Обновление Добавлен 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> 

ответ

3

Вместо создания нового элемента и удаление старого элемента, просто переместить его:

$(".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)); 
    } 
    }); 
}); 
+0

Это сработало! Большой! Спасибо, сэр! – jmogera

1

Я не знаю, почему это предполагает вызов Ajax, но в любом случае - почему бы не удалить старый элемент перед тем вы добавляете новый с такой же идентификатор?

+1

Было бы то же самое, потому что JQuery поддерживает несколько элементов с одинаковыми 'id'. –

+0

Моя мысль заключалась в том, что в исходном коде создается и добавляется новый элемент с этим идентификатором, * тогда * remove() вызывается на этом id, предположительно удаляя как старый, так и новый элемент;) – delicateLatticeworkFever

Смежные вопросы