Javascript 未序列化jQuery可排序更新数据

我在用电脑

查看关于如何序列化数据的基本示例，我有以下代码

    <div class='span4'>
        <ol class='serialization vertical'>
            <li data-id='1' data-name='Item 1' data-status='1'>Item 1 <span class="status">toggle</span></li>
            <li data-id='2' data-name='Item 2' data-status='1'>Item 2 <span class="status">toggle</span></li>
            <li data-id='3' data-name='Item 3' data-status='1'>Item 3 <span class="status">toggle</span></li>
            <li data-id='4' data-name='Item 4' data-status='1'>Item 4 <span class="status">toggle</span></li>
            <li data-id='5' data-name='Item 5' data-status='1'>Item 5 <span class="status">toggle</span></li>
            <li data-id='6' data-name='Item 6' data-status='1'>Item 6 <span class="status">toggle</span></li>
        </ol>
    </div>

    var group = $("ol.serialization").sortable({
      group: 'serialization',
      delay: 500,
      onDrop: function (item, container, _super) {
        var data = group.sortable("serialize").get();
        var jsonString = JSON.stringify(data, null, ' ');
    console.log(jsonString);
        $('#serialize_output2').text(jsonString);
        _super(item, container)
      }
    });

如果在拖放列表项之前单击“切换”，console.log将返回正确的状态（1或0）

但是，在拖放之后，如果尝试单击以更新状态，然后再次拖放console.log将返回列表的正确顺序，但不是最新状态

在这里，我需要做什么来确保序列化数据在删除时反映数据属性的值

首先，为什么不更新“数据状态”，如下所示：

因此，原因是jQuery缓存了数据

解决方案：

var group = $("ol.serialization").sortable({
    group: 'serialization',
    delay: 500,
    onDrop: function (item, container, _super) {
        group.children().each(function(){
            jQuery._data(this, 'parsedAttrs', false);
            jQuery.removeData(this);
        });
        var data = group.sortable("serialize").get();
        var jsonString = JSON.stringify(data, null, ' ');
        console.log(jsonString);
        $('#serialize_output2').text(jsonString);
        _super(item, container)
     }
 })

---

此提琴：

感谢您的详细回复和示例，这非常有帮助

var result = $.extend({}, $parent.data())

if ( elem.nodeType === 1 && !jQuery._data( elem, "parsedAttrs" ) ) {

dataAttr( elem, name, data[ name ] );

if ( data === undefined && elem.nodeType === 1 ) {

var group = $("ol.serialization").sortable({
    group: 'serialization',
    delay: 500,
    onDrop: function (item, container, _super) {
        group.children().each(function(){
            jQuery._data(this, 'parsedAttrs', false);
            jQuery.removeData(this);
        });
        var data = group.sortable("serialize").get();
        var jsonString = JSON.stringify(data, null, ' ');
        console.log(jsonString);
        $('#serialize_output2').text(jsonString);
        _super(item, container)
     }
 })