Question

我有以下html结构

<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 =“client”的新克隆。当我点击按钮add_client时，新的invoice_object apper。
我可以使用.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>

Answer 1

如果有人遇到这个问题，我已经解决了使用类似这样的问题：克隆（）的内容我已经使用了.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>

Jquery嵌套div克隆循环JQUERY

1 个答案: