嵌套的可移植动态项未折叠

nestedsortable dynamic item not collapsing

本文关键字：折叠 动态 可移植 嵌套      更新时间：2023-09-26

我正在使用这个嵌套的可排序插件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（），希望这能再次"重新配置"所有项目。然而，那里没有运气。有人能告诉我如何正确地连接这些新的动态创建的项目，以便将它们作为树中的其他项目处理吗？

谢谢！

好的，经过两天的研究，我终于解决了这个问题。有趣的是，我一直在寻找的代码就在我输入的新代码的正上方。（就在我眼皮底下。）感谢这里善良的人向我介绍：视觉事件——这极大地帮助我找到了事件最初创建的地方！

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

希望这能帮助到一些人。这是一份工作副本，以防你想看到它的实际效果。

相关文章：