0

我正在使用这个嵌套的可排序插件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()，希望这会再次“重新配置”所有项目。但是，那里没有运气。谁能告诉我如何正确连接这些新的动态创建的项目，以便将它们视为树中的其他项目？

谢谢！

4

1 回答 1

2

Ok, after 2 days of looking at this, I was able to solve the issue. It is funny - the code I had been looking for was directly above the new code that I had entered. (Right under my nose.) Thanks to the kind people here for introducing me to: Visual Event - that greatly helped me to track down where the events were being created in the first place!

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

Hopefully, this will help someone. Here is a working copy in case you want to see it in action.

于 2013-07-18T12:28:10.533 回答