Thêm div động trên nhấp chuột

Question

Tôi có yêu cầu thêm nhiều hộp nhập liệu để nhập dữ liệu. Ban đầu sẽ chỉ có một hộp đầu vào và có nút "Thêm" bên cạnh mỗi hộp nhập được tạo để tạo nhiều hộp văn bản.

Nếu bạn nhìn vào fiddle của tôi có 3 cấp độ hộp văn bản ở cấp 1 nó có tùy chọn để nhập chỉ 1 cấp dữ liệu nhưng khi nói đến cấp độ 2, sẽ có một tùy chọn để tạo cấp thứ hai của cùng một bậc cha mẹ để chúng tôi có thể nhập dữ liệu phụ của tiêu đề chính. Ví dụ Nếu tôi viết tên Nhà nước sau đó tôi sẽ có thể nhập loại phụ ..

Đây là mã cho mức đơn 1st

$(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

kết quả bắt buộc

Cách sao chép class="filtr" div là bảng điều khiển cấp hai hoạt động chính xác giống như bảng điều khiển cấp 1?

cấu trúc mã mong đợi nên như thế này

<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

Dưới đây là jsfiddle.net/VMBtC/28

code 

Nhưng tôi không t hink clone là giải pháp tốt nhất cho điều này, ít nhất là bản sao mẫu không hoạt động element.But mã này vẫn cần rất nhiều công việc.

Answer 2

Bạn có thể thử các API parentsUntil để có được những filtr div

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

Answer 3

Một giải pháp khác.

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)); 


     });