jquery Ajax sortable list stops being sortable when Ajax call updates the list html
- by Trevor
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 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">