嵌套的可动态项目不会折叠

我正在使用这个嵌套的可排序插件mjsarfatti.com/sandbox/nestedSortable ，到目前为止我唯一的问题是当我动态地将项添加到“树”时，我无法展开或折叠项目。 我到目前为止只是使用示例代码，并添加到那里。

我如何动态添加项目：

$('#new-button').on('click', function() { var nextId = $('ol.sortable').nestedSortable('nextId'); var $li = $("
 New Item
"); $li.addClass('mjs-nestedSortable-leaf'); $('ol.sortable').append($li); }) 

当我将这些新项目添加到树中时，它们工作正常 – 我可以将它们移动到整个树中，让它们成为孩子等等。但是，当我尝试折叠我已经创建父项的新项目时 – 没有响应。

我确信我没有在某处添加正确的事件处理程序，但我无法确定发生的位置。 在添加新项目后，我甚至触发了树的destroy（）和_create（），希望再次“重新配置”所有项目。 但是，那里没有运气。 任何人都可以告诉我如何正确地连接这些新动态创建的项目，以便它们将被视为树中的其他项目？

谢谢！

Answer 1

好的，经过2天的研究，我能够解决这个问题。 这很有趣 – 我一直在寻找的代码直接位于我输入的新代码之上。 （在我的鼻子底下。）感谢这里的善良人士向我介绍： 视觉事件 – 这极大地帮助我追踪事件的创建地点！

 $('#new-button').on('click', function() { var nextId = $('ol.sortable').nestedSortable('nextId'); //Begin creating dynamic list item var $li = $("
"); var $lidiv = $("
"); var $disli = $(""); $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); }) 

希望，这将有助于某人。 这是一份工作副本 ，以防您希望在行动中看到它。