I have an unordered list that is sorted and each of the <li> elements contain divs with a class that is used to assign a click function to the div.

The click function works fine before a list item is moved in the list. Once it has been moved though, the click function does not work anymore.

Any thoughts on what this could be? I've tried a couple of things now and the below is the current state of the code which is producing the error as described above.

Thanks in advance 

2. $("#sortable").sortable({
3. placeholder: 'ui-state-highlight',
4. handle: '.handle',
5. update: function(event, ui) {
6. $('.step_list').each(function(index) {
7. if($(this).attr('order_number') != (index + 1))
8. {
9. $.post("ajax_scripts/update_step_order_by_step_id.php", { step_id : $(this).attr('step_id'), order_number : index + 1 }, function(data)
10. {
11. if(data == "ERROR")
12. {
13. alert("An error occurred");
14. }
15. });
16. }
18. $.post("ajax_scripts/get_steps_as_unordered_list_by_process_id.php", { process_id : $('#chosen_process option:selected').val() }, function(data)
19. {
20. if(data == "ERROR")
21. {
22. alert("An error occurred while getting the steps from the database");
23. }
24. else
25. {
26. $('#sortable').html(data);
27. }
28. });
29. });
30. },
31. start: function(e) {
32. $(".step_list").unbind("click");
33. },
34. stop: function(e) {
35. $(".step_list").click(listClick);
36. }
37. });
38. $("#sortable").disableSelection();
40. $(".step_list").click(listClick);