nestedsortable dynamic item not collapsing

Question

Я использую этот вложенный сортируемый плагин mjsarfatti.com/sandbox/nestedSortable, и единственная проблема, которую я имею до сих пор, - это когда я динамически добавляю элемент в «дерево», я не могу развернуть или свернуть элемент (ы) , Я просто использую образец кода до сих пор и добавляю к этому.

Как я динамически добавлять элементы:

$('#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);    
}) 

Когда я добавляю эти новые элементы в дерево, они прекрасно работают - я могу перемещать их по всему дереву, сделать их детьми и т.д. Однако , когда я пытаюсь свернуть новый элемент, который я сделал родителем - ответа нет.

Я уверен, что я просто не добавил правильный обработчик событий где-то, но я не могу запланировать, где это происходит. Я даже вызвал файлы destroy() и _create() дерева после добавления нового элемента (ов), надеясь, что он снова «повторно настроит» все элементы. Впрочем, не повезло. Может ли кто-нибудь сказать мне, как я могу правильно подключить эти новые динамически создаваемые элементы, чтобы они воспринимались как другие элементы в дереве?

Спасибо!

Answer 1

Хорошо, после двух дней рассмотрения этого вопроса я смог решить проблему. Это забавно - код, который я искал, был непосредственно над новым кодом, который я ввел. (Прямо под моим носом.) Благодаря добрым людям здесь, чтобы познакомить меня с: Visual Event - это очень помогло мне отследить, где были созданы события в первую очередь!

$('#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);   
}) 

Надеюсь, это поможет кому-то. Это working copy, если вы хотите его увидеть.