jQuery UI onchange每個循環不能按預期工作

Question

我試圖實現的是，當textareas列表重新排列，textareas的名稱更新爲始終按順序升序。爲了證明：

原始

name  content 
value[0] content0 
value[1] content1 
value[2] content2 

重新排序（不一定按此順序，只是一個例子）

name  content 
value[0] content2 
value[1] content0 
value[2] content1 

我已經通過書面名單應該循環和更新名稱屬性，但有時它不會，其他時候它會得到錯誤的名字順序。這裏是我正在運行的jQuery：

$(document).ready(function(){ 
    $(".sortable").sortable(); 
    $(".sortable").disableSelection(); 
    $(".sortable").on("sortchange", function(event, ui) { 
     var $i = 0; 
     $('.sortable > li').each(function(){ 
      $(this).children('textarea').attr('name', 'value[' + $i + ']'); 
      $i++; 
     }); 
    }); 
}); 

And a fiddle。不知道我做錯了什麼。

Answer 1

使用sortstop而不是sortchange：

$(document).ready(function(){ 
    $(".sortable").sortable(); 
    $(".sortable").disableSelection(); 
    $(".sortable").on("sortstop", function(event, ui) { 
     var $i = 0; 
     $('.sortable > li').each(function(){ 
      $(this).children('textarea').attr('name', 'value[' + $i + ']'); 
      $i++; 
     }); 
    }); 
}); 

小提琴：https://jsfiddle.net/kz4t8ph5/2/

而且看看賽義夫的回答如下:)

Answer 2

使用sortupdate，而不是sortchange。在排序過程中觸發sortchange，這就是爲什麼你會得到意想不到的數字順序。當您停止排序時，將觸發sortupdate。所以你會得到最終的位置和預期的順序。

$(".sortable").on("sortupdate", function(event, ui) 
{ 
}