jQuery的嵌套的div克隆循环JQUERY

-1

<div id="menu_item"> 
    <div id="piatto_item"> 
     SOME CODE 
    </div> 
    <div id="piat_div"></div> 
    <button id="add_piatto>ADD DISH</button> 
</div> 
<div id="men_div></diva> 
    <button id="add_menu">ADD MENU</button>

我需要的是，当我在add_object点击DIV ID的新克隆=“客户端出现。当我按一下按钮add_client一个。新invoice_object冲击片雷管
我能够做到这一点使用.clone（“div_name”）功能，但元素以错误的方式加入
我曾尝试使用此功能：

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#add_menu").click(function(){ 
      var newRow = $('#menu_item').clone(); 
      $('#men_div').append(newRow); 
       }); 
    $("#add_piatto").click(function(){ 
      var newPiatto = $('#piatto_item').clone(); 
      $('#piat_div').append(newPiatto); 
       }); 
      }); 
</script>

来源

2017-04-10 rubenSousa

不幸的是这个问题是相当普遍的，并且您还没有表现出任何的你自己的工作。请查看如何提出一个好的问题指南：stackoverflow.com/help/how-to-ask –

确保在制作克隆时更改ID。 ID必须是唯一的。或者你应该使用类而不是ID。 – Barmar

“元素是以错误的方式添加的”是什么意思？ – Barmar

如果有人拥有这个问题我一直在使用这样的事情解决了：这一翻译的clone（）的我已经使用.html和.append，我已经添加增量ID的每个

<script type="text/javascript"> 
$(document).ready(function(){ 
    var menu = 0; 
    var piat = 0; 
    $("#add_menu").click(function(){ 
      menu++ 
      $('#men_div').append('<div class="food-menu-form-wrapper" id="menu_item-'+ menu + '"><h6 class="text-primary text-uppercase">Prova</h6>\ 
            <div class="form-group form-group-lg">\ 
            <input type="text" class="form-control" placeholder="Ex: Breakfast"/>\ 
            </div>\ 
            <div class="food-menu-form-box clearfix" id="piatto_item">\ 
            <div class="icon">\ 
            <i class="fa fa-cutlery text-primary"></i>\ 
            <span class="number-label">1</span>\ 
            </div>\ 
            <div class="image-upload">\ 
            <div class="dropzone food-menu-image">\ 
            <input name="file" type="file">\ 
            <div class="dz-default dz-message"><span>Click or Drop<br />Images Here<br /><small class="font-italic text-muted font400 mt-5 block">2MB max file</small></span></div>\ 
            </div>\ 
            </div>\ 
            <div class="food-memu-form">\ 
            <div class="row gap-20">\ 
            <div class="col-xss-12 col-xs-12 col-sm-9">\ 
            <div class="form-group">\ 
            <label>Title</label>\ 
            <input type="text" class="form-control"/>\ 
            </div>\ 
            </div>\ 
            <div class="col-xss-12 col-xs-12 col-sm-3">\ 
            <div class="form-group">\ 
            <label>Price</label>\ 
            <div class="input-group">\ 
            <input type="text" class="form-control">\ 
            <span class="input-group-addon">$</span>\ 
            </div>\ 
            </div>\ 
            </div>\ 
            <div class="col-xss-12 col-xs-12 col-sm-12">\ 
            <div class="form-group">\ 
            <label>Short Description</label>\ 
            <input type="text" class="form-control"/>\ 
            </div>\ 
            </div>\ 
            </div>\ 
            </div>\ 
            </div>\ 
            <div id="piat_div' + menu + '"></div>\ 
            <div class="clearfix mt-15">\ 
            <a id="add_piatto' + menu + '"><i class="fa fa-plus-circle" aria-hidden="true"></i></a>\ 
            <a id="remove_piatto"><i class="fa fa-minus-circle" aria-hidden="true"></i></a>\ 
             <span class="ml-5 font13 line-12 text-muted font-italic">You can add upto 10 menus</span>\ 
            </div>\ 
           </div>'); 
      $("#add_piatto"+ menu).click(function(){ 
      $('#piat_div' + menu).append('<div class="food-menu-form-box clearfix" id="piatto_item'+ piat +'">\ 
            <div class="icon">\ 
            <i class="fa fa-cutlery text-primary"></i>\ 
            <span class="number-label">1</span>\</div>\ 
            <div class="image-upload">\ 
              <div class="dropzone food-menu-image">\ 
               <input name="file" type="file">\ 
               <div class="dz-default dz-message"><span>Click or Drop<br />Images Here<br /><small class="font-italic text-muted font400 mt-5 block">2MB max file</small></span></div>\ 
              </div>\ 
             </div>\ 
             <div class="food-memu-form">\ 
              <div class="row gap-20">\ 
               <div class="col-xss-12 col-xs-12 col-sm-9">\ 
                <div class="form-group">\ 
                 <label>Title</label>\ 
                 <input type="text" class="form-control"/>\ 
                </div>\ 
               </div>\ 
              <div class="col-xss-12 col-xs-12 col-sm-3">\ 
              <div class="form-group">\ 
               <label>Price</label>\ 
                <div class="input-group">\ 
                 <input type="text" class="form-control">\ 
                 <span class="input-group-addon">$</span>\ 
                </div>\ 
              </div>\ 
             </div>\ 
              <div class="col-xss-12 col-xs-12 col-sm-12">\ 
               <div class="form-group">\ 
                <label>Short Description</label>\ 
                 <input type="text" class="form-control"/>\ 
               </div>\ 
              </div>\ 
             </div>\ 
            </div>'); 
       }); 
      }); 
    $("#remove_piatto").click(function(){ 
     $('#piat_div').remove(); 
       }); 
      }); 

</script>

来源

2017-04-11 21:25:44 rubenSousa

jQuery的嵌套的div克隆循环JQUERY

回答

相关问题