当Ajax调用更新列表html时，jquery Ajax可排序列表停止可排序

Question

我正在使用 jquery 1.4.2 并尝试实现以下目标：

1 - 向 php 页面发送值以添加/删除项目的函数调用

2 - 返回项目的 html 列表

3 - 列表应该仍然是可排序的

4 - 点击保存（序列化列表）

我的完整 WIP 位于此处 [http://www.chittak.co.uk/test4/index_nw3.php][1]

我试图从 UL 上方的级别进行委派，但我无法让它工作

$("#construnctionstage").delegate('ul li', 'click', function(){

初始列表是可排序的，当您单击添加/删除时，ajax 函数会返回一个包含多个项目的新列表，但我做错了，因为警报消息继续工作，而列表不再可排序。

$(document).ready(function(){

  $('ul').delegate('li', 'click', function(){

      alert('You clicked on an li element!');
    /*$("#test-list").sortable({
      handle : '.handle',
      update : function () {
          var order = $('#test-list').sortable('serialize');
        $("#info").load("process-sortable.php?"+order);
      }
    });*/
}).sortable({
      handle : '.handle',
      update : function () {
          var order = $('#test-list').sortable('serialize');
        $("#info").load("process-sortable.php?"+order);
      }
   });

});

<div id="construnctionstage"> <ul id="test-list"> <li id="listItem_1">

Answer 1

添加/删除新元素后，您需要再次调用 .sortable() 。在 jQuery.ajax 中的“成功”处理程序上执行此操作。