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

好的，经过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);           
})

希望这会对某人有所帮助。如果你想看到它的实际效果，可以使用working copy。

nestedsortable动态项目不折叠

1 个答案: