Nestable jQuery插件:动态添加项目

Question

我在这里使用名为Nestable的jQuery插件:https: //github.com/dbushell/Nestable

我尝试动态添加父项.但是,如果我只在页面中添加代码,则不会出现展开/折叠按钮,我认为使用setParent函数添加项目有更好的解决方案吗？

有没有人已经使用这个插件动态添加了一个项目？

Answer 1

试试这个:

HTML

<button id="appendnestable">Add li</button>
<div class="dd" id="nestable">
  <ol class="dd-list outer">
    <li class="dd-item dd3-item" data-id="1">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="1">Item 1</div>
    </li>

    <li class="dd-item dd3-item" data-id="2">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="2">Item 2</div>
    </li>

    <li class="dd-item dd3-item" data-id="3">
      <div class="dd-handle dd3-handle">Drag</div>
      <div class="dd3-content" name="3">Item 3</div>
    </li>
  </ol>
</div>

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></li>');
    nestablecount++;
  });
});

JSFiddles

http://jsfiddle.net/mijopabe/35Kqu/

http://jsfiddle.net/mijopabe/YgU52/

思想的食物:

如果需要,增量计数器是跟踪分配给每个动态创建的列表项的表单/模态的好方法.然后,如果需要对所述表单/模态执行进一步操作,请使用.on()或.delegate()jquery属性.