单击时添加动态div

Question

我需要添加多个输入框来输入数据。最初只有一个输入框，每个生成的输入框旁边都有一个“添加”按钮，用于生成多个文本框。

如果你看看我的小提琴，在第一级有3个级别的文本框，它可以选择只输入1级数据但是当它达到2级时，应该有一个选项来创建相同父级的第二级这样我们就可以输入主标题的子数据了。例如，如果我写州名，那么我应该能够输入子类别..

以下是第1级菜单的代码

$(document).ready(function(){

     $(":radio").click(function(){
         $(".test").hide();
         var show = $(this).attr("data-show");
         $("#"+show).show(300)
     });
        $('.sort').hide();
        $filtr = $('.filtr');

        $filtr.on('click', '.add', function(){
            $(this).closest('.loop').clone().appendTo( $(this).closest('.test') );

            $('.sort').show();
        });

        $filtr.on('click', '.del', function(){
           $(this).closest('.loop').remove();
        });

        $('#1lev, #2lev, #3lev').hide();

     //For sort up/down
     function moveUp(item) {
    var prev = item.prev();
    if (prev.length == 0)
        return;
    prev.css('z-index', 999).css('position','relative').animate({ top: item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height() }, 300, function () {
        prev.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertBefore(prev);
    });
}
function moveDown(item) {
    var next = item.next();
    if (next.length == 0)
        return;
    next.css('z-index', 999).css('position', 'relative').animate({ top: '-' + item.height() }, 250);
    item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height() }, 300, function () {
        next.css('z-index', '').css('top', '').css('position', '');
        item.css('z-index', '').css('top', '').css('position', '');
        item.insertAfter(next);
    });
}

$(".filtr").sortable({ items: ".loop", distance: 10 });
$(document).on("click", "button.sort", function() {
    var btn = $(this);
    var val = btn.val();
    if (val == 'up')
        moveUp(btn.parents('.loop'));
    else
        moveDown(btn.parents('.loop'));
});

});

FIDDLE

必填结果

如何将class="filtr" div克隆为第二级面板，与第一级面板完全相同？

预期的代码结构应该是这样的

    <div class="filtr"> 
         <!-- we'll clone this one... -->  
         <div class="test" id="2lev"> 
        <div class="loop"> 
            <button value='up' class="sort">Up</button>
            <button value='down' class="sort">Down</button>
            <input type="text" />
            <button class="btn del">x</button>
            <button class="btn add">Add</button> <button class="btn level">></button>

<!--Need to add this div here-->
            <div class="filtr"> 
         <!-- we'll clone this one... -->   
         <div class="test">
        <div class="loop"> 
            <button value='up' class="sort">Up</button>
            <button value='down' class="sort">Down</button>
            <input type="text" />
            <button class="btn del">x</button>
            <button class="btn add">Add</button>
        </div>
        </div>
        <!-- here ...-->
    </div>
<!--Need to add this div here-->

        </div>
        </div>
        <!-- here ...-->
    </div>

Answer 1

在这里 jsfiddle.net/VMBtC/28

code

但我不认为克隆是最好的解决方案，至少克隆模板不是活动元素。但是这段代码仍然需要很多工作。

Answer 2

您可以尝试使用parentsUntil API获取filtr div

http://api.jquery.com/parentsUntil/

Answer 3

另一种解决方案。

http://jsfiddle.net/VMBtC/17/

 $filtr.on('click', '.level', function(){
          var c = $('<div class="filtr insideFiltr" style="padding-left:10px">'+ 
             '<div class="test" id="4lev">' +  
             '<div class="loop">'+
                '<button value="up" class="sort">Up</button>'+
                '<button value="down" class="sort">Down</button>'+
                '<input type="text" />'+
                '<button class="btn del">x</button>'+
                    '<button class="btn add">Add</button>'+
            '</div>'+
                '</div>'+
            '</div>');

            c.insertAfter($(this));


      });