Вложенный динамический элемент не сворачивается

Question

Я использую этот вложенный сортируемый плагин http://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

Хорошо, после 2 дней просмотра я смог решить проблему. Это забавно - код, который я искал, был прямо над новым кодом, который я ввел. (Прямо под моим носом.) Спасибо добрым людям за то, что они познакомили меня с: 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);           
})

Надеюсь, это кому-нибудь поможет. Вот рабочая копия на тот случай, если вы хотите увидеть ее в действии.