Question

我有以下HTML代码描述一个逻辑实体，其中包含3个字段（2个下拉列表和一个数字）

application.rb:

config.time_zone = 'Berlin'
config.active_record.default_timezone = :local

点击<div class="entityRowBorder"> <div class="form-group"> <label for="input1" class="col-sm-2 control-label">Label</label> <div class="col-sm-4"> <select class="form-control"> <option>-- Select --</option> <option>Option1</option> <option>Option2</option> </select> </div> <div class="col-sm-4"> <input type="number" max="100" min="0" class="form-control" id="inputNumber1" placeholder="Number"> </div> </div> <div class="form-group"> <label for="inputExtra" class="col-sm-2 control-label">Extra</label> <div class="col-sm-3"> <select class="form-control"> <option>--Select Extra --</option> <option>SQL Extra 1</option> <option>SQL Extra 2</option> </select> </div> </div> </div> </div>按钮（在HTML后面显示）后，我想动态添加这个＆＃34; entityRowBorder＆＃34; Add包含这3个字段。

进行此添加的最佳方法是什么？

Answer 1

绑定点击事件并使用.clone()方法：

$('#addbuttonid').on('click', function(){ // bind a click event
    var clone = $('.entityRowBorder:first').clone(); // get a clone of specific div
    $(this).before(clone); // push to the DOM just before the button
});

如果你想拥有一个包含现有数据和事件的克隆，那么你可以将true传递给克隆方法：

var clone = $('.entityRowBorder:first').clone(true);

这使您可以使用特定元素的新深层副本包含所有绑定事件和数据。

在HTML中动态添加复杂的HTML代码

1 个答案: