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