jquery Ajax sortable list stops being sortable when Ajax call updates the list html

Question

Hi,

I am using jquery 1.4.2 and trying to achieve the following:

1 - function call that sends a value to a php page to add/remove an item

2 - returns html list of the items

3 - list should still be sortable

4 - save (serialise list) onclick

My full WIP is located here [http://www.chittak.co.uk/test4/index_nw3.php][1]

I tried to delegate from the level above the UL but I could not get this to work

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

The initial list is sortable, when you click add/remove the ajax function returns a new list with the a number of items, BUT I am doing something wrong as the alert message continues to work while the list is no longer sortable.

$(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

You'll need to call .sortable() again after adding/removing new elements. Do this on the "success" handler in jQuery.ajax.