nestedsortable动态项目不崩溃 [英] nestedsortable dynamic item not collapsing

问题描述

我正在使用此嵌套的可排序插件 mjsarfatti.com/sandbox/nestedSortable ，这是我唯一遇到的问题到目前为止，当我将项目动态添加到树"时，我无法扩展或折叠该项目.到目前为止，我只是在使用示例代码，然后添加到其中.

I am using this nested sortable plugin mjsarfatti.com/sandbox/nestedSortable and the only issue I have so far is when I dynamically add an item to the "tree", I am not able to expand or collapse the item(s). I am just using the sample code so far, and adding to that.

我如何动态添加项目:

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

当我将这些新项目添加到树中时，它们工作得很好-我可以将它们移动到整个树中，让它们成为子项，等等. 但是，当我尝试折叠我已经成为父母的新物品时，没有任何反应.

When I add these new items to the tree, they work just fine - I can move them throughout the tree, make them children, etc. However, when I try to collapse a new item that I have made a parent - there is no response.

我确定我只是没有在某个地方添加正确的事件处理程序，但是我无法找到发生这种情况的地方.添加新项后，我什至触发了tree的destroy()和_create()，希望能够再次重新配置"所有项.但是，那里没有运气. 谁能告诉我如何正确连接这些新动态创建的项目，以便将它们视为树中的其他项目?

I am sure I just haven't added the correct event handler somewhere, but I can't fin where that is happening. I have even triggered a destroy() and _create() of the tree after I add the new item(s), hoping that would "re-configure" all the items again. However, no luck there. Can anyone tell me how I can properly hook up these new dynamically created items so they will be treated as other items in the tree?

谢谢！

推荐答案

好的，经过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.

这篇关于nestedsortable动态项目不崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！