jQuery + Sortable + live

Question

I\'m adding list items to a page dynamically with $.get, then appending them to the OL element. Pretty usual to this point.

But jQuery isn\'t aware of these new ite

Answer 1

Did you try .sortable('refresh')? http://docs.jquery.com/UI/Sortable#method-refresh

Answer 2

on the tail end of your code just append .sortable({}); with all your parameters respecified. There's probably a way to do this without duplicating your code by using a function or something, but at least this works.

$('#List').live('click',function(e){

var myHTMLcode = '<li>New Item</li>'

myHTMLcode.appendTo('#List').sortable({
 items  : 'li',
 axis  : 'xy',    

 update  : function(event, ui){SPECIFIC Sortable FUNCTION CODE HERE}).fadeIn();
)};

Answer 3

The refresh method of .sortable() does not seem to recognize li's which are NOT added via the .sortable() functions.

Try adding your .sortable() initialisation code into a function which you call on document ready AND in you code where you dynamically add li's.

Instead of:

jQuery(document).ready(function() {
    jQuery("#mySortableOL").sortable({
        ...
    });
}
...
jQuery("#mySortableOL").append(...);
jQuery("#mySortableOL").sortable("refresh");

Try something like:

jQuery(document).ready(function() {
    jQuery("#mySortableOL").doSort();
}
...
jQuery("#mySortableOL").append(...);
doSort();
...
function doSort(){
    jQuery("#mySortableOL").sortable({
        ...
    });
}

Answer 4

I found this solution and working fine for me.

makesortable = function(){
        $( "#mylist" ).sortable({
            ...
        })
      };
...
// after list refresh :
makesortable();