Javascript 可嵌套jquery插件动态添加列表

当我们尝试添加一个列表项时，Nestable工作得很好，如下所述（）

但是，如果我们尝试添加一个全新的列表（ol元素），它将无法正常工作

当我们尝试动态添加新的ol元素时，它没有显示EXPLAND选项

感谢您的帮助

jsfiddle来描述这个问题：

//为列表1激活可嵌套
$（'#nestable'）。nestable（）
$（函数（）{
var nestablecount=4；
$（'#appendnestable'）。单击（函数（）{
$（'ol.outer'）.append（'
DragItem'+nestablecount+”
）；
nestablecount++；
});
});

要创建可嵌套子列表，必须遵循以下模式：

<ol class="dd-list outer">
    ...
    <li class="dd-item addnewlist" data-id="4">
        <div class="dd-handle">Item 4</div>

        <!-- Dynamically added >>>>>> -->
        <ol class="dd-list outer">
            <li class="dd-item" data-id="3">
                <div class="dd-handle">Item 3</div>
            </li>
        </ol>
        <!--  <<<<<<  -->

    </li>
    ...
</ol>

可以这样调用此方法：

$('#nestable').nestable('reinit');

---

完整示例：

我的方法与Dekkard的方法非常相似。你会看到我在11个月前在CodePen上实现了它，当时nestable.js的未来似乎比目前的开发支持更光明。我认为它值得包括在内，这样你就可以看到该插件还能做些什么

查看我的代码笔：

您可以创建并使用计数器来跟踪您创建并正在操作的特定列表项：

$(function(){
  var nestablecount = 4;
  $('#appendnestable').click(function(){
  $('ol.outer').append('<li class="dd-item dd3-item" data-id="'+nestablecount+'">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="'
+nestablecount+'">Item '+nestablecount+'</div><div id="c-'+nestablecount+'" 
class="content"><form role="form-'+nestablecount+'"><div class="form-group"><label 
for="name">Name</label><input type="text" class="form-control" id="name" 
placeholder="Phyllis Wheatley"></div><div class="form-group"><label for="name">Add a 
Description</label><textarea class="form-control" rows="3" placeholder="Quite the poet">
</textarea><div class="checkbox"><label><input type="checkbox" value="">Now you know it ;)
</label><button type="submit" class="btn btn-default btn-xs pull-right">Yes</button></div>
</div></form></div></li>');

  updateOutput($('#nestable').data('output', $('#nestable-output')));
  nestablecount++;
  });

});

$（函数（）{
var nestablecount=4；
$（'#appendnestable'）。单击（函数（）{
$（'ol.outer'）.append（'li class=“dd item dd3 item”data id=“”+nestablecount+”>
DragItem'+nestablecount+'Name添加一个
描述
现在你知道了；）
对
(),；
updateOutput（$（'#可嵌套'）.data（'output'，$（'#可嵌套输出'））；
nestablecount++；
});
});
大家好，
我的方法非常简单，易于阅读。
在项目中添加2个jquery文件：-1）nestable.js 2）nestable.css
**HTML**
输入您的数据
向li添加数据
**jQuery**
$（'#nestable'）.nestable（）；
$（函数（）{
var nestablecount=1；
$（'#appendnestable'）。单击（函数（）{
var tnc=$（'#tncInput'）.val（）；
var html='
“+tnc+”
”
$（'ol.outer'）.append（html）；
$（'tncInput'）.val（''）
nestablecount++；
});
});
这就是您将能够动态地向LI输入数据的方式。
此外，您甚至可以更改一些可嵌套的配置设置，如下所示：
$（“#nestable”）.nestable（{maxDepth:2，group:1}）；
maxDepth:-项目可以嵌套的级别数（默认值5）
组：-允许在列表之间拖动的组ID（默认为0）
谢谢
不太确定您要找的是什么。您的代码似乎执行了您要求它执行的操作。你能提供更多的信息吗？您的代码不是在添加
ol
，而是在向现有
ol
添加和“li”。工作正常，但如果有其他列表已折叠，则“展开”按钮将更改为“折叠”，而不展开列表。更新了JSFIDLE以解释问题更新了JSFIDLE，reinit将项重置为展开状态。工作正常，但不太满意，因为它在添加新节点时只展开所有可用节点。它必须只展开我们要向其中添加新项的节点，所有其他节点必须保持原样。谢谢
$('#nestable').nestable('reinit');

$(function(){
  var nestablecount = 4;
  $('#appendnestable').click(function(){
  $('ol.outer').append('<li class="dd-item dd3-item" data-id="'+nestablecount+'">
<div class="dd-handle dd3-handle">Drag</div><div class="dd3-content" name="'
+nestablecount+'">Item '+nestablecount+'</div><div id="c-'+nestablecount+'" 
class="content"><form role="form-'+nestablecount+'"><div class="form-group"><label 
for="name">Name</label><input type="text" class="form-control" id="name" 
placeholder="Phyllis Wheatley"></div><div class="form-group"><label for="name">Add a 
Description</label><textarea class="form-control" rows="3" placeholder="Quite the poet">
</textarea><div class="checkbox"><label><input type="checkbox" value="">Now you know it ;)
</label><button type="submit" class="btn btn-default btn-xs pull-right">Yes</button></div>
</div></form></div></li>');

  updateOutput($('#nestable').data('output', $('#nestable-output')));
  nestablecount++;
  });

});

                Hello All,

                My approach is very simple and is readily readable.

                Add 2 jquery files in your project :- 1) nestable.js 2) nestable.css

                **HTML**

                <label>Enter Your Data</label>
                <input type='text' id='tncInput'>
                <button id="appendnestable">Add Data to li</button>
                <div class="dd" id="nestable">
                  <ol class="dd-list outer"></ol>
                </div>

            **jQuery** 

            $('#nestable').nestable();

            $(function() {
              var nestablecount = 1;
              $('#appendnestable').click(function() {
                var tnc = $('#tncInput').val();
                var html = '<li class="dd-item" id="' + nestablecount + '"  data-id="' + nestablecount + '"><div class="dd-handle"> ' + tnc + '</div></li>'
                $('ol.outer').append(html);
                $('#tncInput').val('')
                nestablecount++;
              });
            });

        This is how you will be able to enter your data dynamically to LI.
    Moreover, you can even change some nestable configuration settings as follows :

    $('#nestable').nestable({maxDepth:2, group:1});

    maxDepth :- number of levels an item can be nested (default 5)
    group:-  group ID to allow dragging between lists (default 0)

Thanks!!