Sortable: dynamically created sortables do not catch events

[jstayton]

Example: ​http://www.justinstayton.com/sortableTest.html

Move 'Latest Pages' to the empty sortable at the bottom, which dynamically adds a new empty ul to the bottom. As you can see, the new ul looks like it's recognized as a sortable due to the class="ui-sortable" that is added. Items can also be dropped in this new ul; however, no 'update' or 'receive' is fired, and items added to the new ul cannot be moved back to any of the other connected lists.

I'm not sure if this is supposed to work and it's a bug, or if I'm just not doing things correctly with sortable('refresh'), or if this wasn't a planned feature and only partially works by accident... but I can definitely see the usefulness in having said ability, and I'm looking forward to using it. Let me know what you think. Thanks, Paul!

 $('#recentActivity > ul').sortable(
               {
                  connectWith: ['#recentActivity > ul'],
                  opacity: 0.7,
                  receive: function(e, ui) { alert('received'); },
                  update: function(e, ui) {
                             if (ui.element.attr('id') == 'newRow') {
                               ui.element.attr('id', 'row' + (ui.element.siblings('ul').length + 1));
                               ui.element.after('<ul id="newRow" style="width: 600px; height: 100px; border: 1px solid #000000;"></ul>');
                               $('#recentActivity > ul').sortable('refresh');
                             }

                             console.log(ui.element.attr('id'));
                             console.log(ui.element.sortable('toArray'));
                          }
               }
            );
         });

[paul]

Hey there, the issue you have here is that the "refresh" function will only refresh sortables that are alrdy initialized as sortables - however, that won't help here, because your newly created sortable is not yet sortable.

Easy fix:

Replace the $('#recentActivity > ul').sortable('refresh'); with a new initialization, meaning $('#recentActivity > ul').sortable({ connectWith: #recentActivity > ul });

This will leave all other sortables, and just init the ones that are new - helped in my test case :)