[英]How to set dynamic input name which generated dynamically using jquery live()
我是JavaScript的新手,我有一个带两个文本字段和添加按钮的html表,现在我写了一个小jQuery脚本,当单击添加按钮时,该脚本又生成了两个文本字段,所有这一切都成功了,但是我的问题是如何输入不同的名称和这些动态生成的字段的ID。 我的代码如下。
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
$(document).ready(function() {
$('.addNew').live({
click: function(){
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
});
});
请任何帮助如何生成这些字段的不同名称和ID。
首先,从jq 1.7开始,.live被贬值。使用.delegate
所以..
$(document).ready(function() {
var idIndex=1;
$(document).delegate("click",".addNew",function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes_'+idIndex+'"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs_'+idIndex+'" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
idIndex++;
});
});
我有个建议可能很好用,
为什么不将输入字段设为数组,
因此,当您提交它时,它将是一组输入组
或者您可以轻松地使名称id基于tr索引
如name_1和id_1,name_2和id_2
我会使用on()(和off())。 您将其设置为父容器(在本例中为表),然后侦听“ addNew”类。 每当将具有class =“ addNew”的新项目添加到表中时,它将处于活动状态。
<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
<tr>
<td>ACC_CODE</td>
<td>ACC_NAME</td>
<td>ACTION</td>
</tr>
<tr>
<td> <input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
<td> <input type="text" class="click" name="parentinput" id="parentinput" /></td>
<td> <input type="button" value="Add New" class="addNew" name="addNew" /></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('.table').on('click', '.addNew', function() {
$('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs" id="parentinputs" /></td><td><input type="button" value="Add New" class="addNew" name="add" /></td></tr>');
});
});
</script>
但请注意:在您的代码中,您这样做:
<input type="button" value="Add New" class="add" name="add" />
当然这是行不通的。 它必须是class =“ addNew”
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.