nestedsortable dynamic item not collapsing

问题

I am using this nested sortable plugin mjsarfatti.com/sandbox/nestedSortable and the only issue I have so far is when I dynamically add an item to the "tree", I am not able to expand or collapse the item(s). I am just using the sample code so far, and adding to that.

How I am adding the items dynamically:

$('#new-button').on('click', function() {       
   var nextId = $('ol.sortable').nestedSortable('nextId');
   var $li = $("<li id=\"list_" + nextId + "\"><div><span class=\"disclose\"><span></span>          
   </span>New Item</div>");
   $li.addClass('mjs-nestedSortable-leaf');         
   $('ol.sortable').append($li);            
})

When I add these new items to the tree, they work just fine - I can move them throughout the tree, make them children, etc. However, when I try to collapse a new item that I have made a parent - there is no response.

I am sure I just haven't added the correct event handler somewhere, but I can't fin where that is happening. I have even triggered a destroy() and _create() of the tree after I add the new item(s), hoping that would "re-configure" all the items again. However, no luck there. Can anyone tell me how I can properly hook up these new dynamically created items so they will be treated as other items in the tree?

Thanks!

回答1:

Ok, after 2 days of looking at this, I was able to solve the issue. It is funny - the code I had been looking for was directly above the new code that I had entered. (Right under my nose.) Thanks to the kind people here for introducing me to: Visual Event - that greatly helped me to track down where the events were being created in the first place!

$('#new-button').on('click', function() {       
    var nextId = $('ol.sortable').nestedSortable('nextId');
    //Begin creating dynamic list item
   var $li = $("<li id=\"list_" + nextId + "\">");
   var $lidiv = $("<div></div>");
   var $disli = $("<span class=\"disclose\"><span></span></span>");
   $li.addClass('mjs-nestedSortable-leaf');

   //Assign event listener to newly created disclose span tag above
   $disli.on('click', function() {
       $(this).closest('li').toggleClass('mjs-nestedSortable-collapsed').toggleClass('mjs-nestedSortable-expanded');
    });

    //Now actually start to append to DOM
    $lidiv.append($disli);
    $lidiv.append("New List Item " + nextId);
    $li.append($lidiv);
    $('ol.sortable').append($li);           
})

Hopefully, this will help someone. Here is a working copy in case you want to see it in action.

来源：https://stackoverflow.com/questions/17702566/nestedsortable-dynamic-item-not-collapsing