JQuery nested sortable chrome issues

Question

I designed a file tree such as a widget using advanced jquery with jquery sort , which handles nested sorts better than standard jQuery.

I had a problem re-initializing the tree with new data. There are no problems in firefox, but chrome works. Here you can see a minimal example (or on jsfiddle here )

In the onDrop callback, the tree is reinitialized. For brevity, all that happens is console.log , but in my actual example, the data is sent to the server via ajax, and the response has new data to update the tree with.

So Firefox is happy with this solution, but in chrome, as soon as I drag once and the tree is reinitialized, the next drag will not be done with Uncaught TypeError: Cannot read property 'group' of undefined

• ✓ Firefox
• ✓ Internet explorer
• ✕ Chrome

Answer 1

If you destroy sortable every time before initializing this element, it will work:

 function init(e) { // First of all - we destroy the sortable $('ul').sortable('destroy'); var root = $('<ul></ul>') createNodes(root) e.html(root) root.sortable({ group: 'foo', onDrop: function ($item, container, _super, event) { // These two lines are default behaviour of the plugin $item.removeClass(container.group.options.draggedClass).removeAttr("style"); $("body").removeClass(container.group.options.bodyClass); console.log('Updating') init(e) } }) } 

Working fragment :

 function createNodes(e) { var foo = $('<li>Foo<ul></ul></li>'); var bar = $('<li>Bar<ul></ul></li>'); var baz = $('<li>Baz<ul></ul></li>'); bar.find('ul').append(baz); e.append(foo, bar); } function init(e) { // First of all - we destroy the sortable $('ul').sortable('destroy'); var root = $('<ul></ul>') createNodes(root) e.html(root) root.sortable({ group: 'foo', onDrop: function ($item, container, _super, event) { // These two lines are default behaviour of the plugin $item.removeClass(container.group.options.draggedClass).removeAttr("style"); $("body").removeClass(container.group.options.bodyClass); console.log('Updating') init(e) } }) } $(document).ready(function(){ init($('#myroot')) }) 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//johnny.imtqy.com/jquery-sortable/js/jquery-sortable.js"></script> <div id="myroot"> </div>