如何将元素追加到动态生成的元素
How to append an element to a dynamically generated element
我有几个表单一个接一个地克隆取决于用户的输入。 在每个表单中,我都有按钮来添加一行输入:
<h4>3.3.5 Input Parameters</h4>
<table id="input_param" data-role="table" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1">Parameter</th>
<th data-priority="2">Data Type</th>
<th data-priority="3">Required</th>
<th data-priority="4">Brief description</th>
<th data-priority="5">Location in Request</th>
</tr>
</thead>
<tbody></tbody>
</table>
<input type="button" id="add_input_param" value="+ Add Input Parameter" data-inline="true" /><br />
因此,如果它是第一个表单(静态表单),那么这段代码将起作用:
$("#add_input_param").click(function() {
var maincontent = loadParam('IP', '01', ipCount);
ipCount++;
$('#input_param').append(maincontent).trigger("create");
});
因为第一个之后的那个我知道我必须使用 .on()
$("#input_form").on("click", "#add_input_param", function() {
var maincontent = loadParam('IP', '01', ipCount);
ipCount++;
//$('this').append(maincontent).trigger("create");
});
评论区是我无法让它工作的部分。我想将主内容附加到 #input_param(它是一个表),但由于它是动态生成的,我该如何修改该行代码以便它使用它?
主内容将是这样的:
function loadParam(IO, form_number, counter) {
var id = IO + form_number + '-' + counter;
var maincontent = '<tr>';
maincontent += '<th><input type="text" name="param' + id + '" id="param' + id + '" value="" /></th>';
maincontent += '<td><input type="text" name="data_type' + id + '" id="data_type' + id + '" /></td>';
maincontent += '<td>';
maincontent += '<select id="required" name="req' + id + '" id="req' + id + '"class="form-alpha">';
maincontent += '<option value="Mandatory" >Mandatory</option>';
maincontent += '<option value="Optional" >Optional</option>';
maincontent += '<option value="Conditional" >Conditional</option>';
maincontent += '</select>';
maincontent += '</td>';
maincontent += '<td><textarea name="des' + id + '" id="des' + id + '" ></textarea></td>';
maincontent += '<td>';
maincontent += '<select name="location' + id + '" id="location' + id + '" class="form-alpha">';
maincontent += '<option value="Header" >Header</option>';
maincontent += '<option value="Body" >Body</option>';
maincontent += '<option value="Query_param" >Query Parameter</option>';
maincontent += '<option value="Resource_uri" >Resource URI</option>';
maincontent += '</select>';
maincontent += '</td>';
maincontent += '</tr>';
return maincontent;
}
你不能像以前一样做吗?
$('#input_param').append(maincontent).trigger("create");
此外,由于您有thead
并且tbody
因此直接定位正确的元素(thead或tbody)更安全。
$('#input_param > tbody').append(...);
相关文章:
- 将列表元素动态添加到ul元素中
- 将输入 html 元素动态关联到颜色选取器
- 媒体元素 - 动态加载音频
- 根据其内部元素动态更改 CSS
- 编写脚本以向元素动态添加.current(类似活动类)的场景
- 使用knockoutjs虚拟元素动态创建html部分
- 将JS中的元素动态添加到XUL中
- 如何从jquery中获得元素动态附加的完整表
- 使用jquery向li元素动态添加类
- 点击事件不't在尝试将元素动态添加到<ul>标签
- 使用Knockout.js Issue将元素动态添加到嵌套列表中
- 如何从DOM元素动态禁用popover
- 将样式元素动态插入DOM的最后一种跨浏览器方式
- 无法将元素动态添加到数组中
- 指令如何等待元素'动态插值属性被处理?
- 设置活动元素和非活动元素(动态)
- 是否可以使用JS/PHP为网页中的元素动态分配ID
- 如何制造<光>元素动态调整以填充浏览器窗口的整个宽度
- 基于页面元素动态构建菜单结构
- 向现有元素动态添加删除绑定