如何在创建动态输入文件时获取相同输入类型的单独 ID
how to get separate id for same input type while creating dynamic input filed?
js 文件
在下面的 JavaScript 文件中,每当创建新的输入类型时,我如何为输入类型创建不同的 ID。
$(document).ready(function(){
$(".template_charge:first").hide(); //hide template
var charge_count =0; // Total charge types.
var charge_id_no =0; // To assign id and name to charge component
/* Add new item based on hidden template */
$(".add_charge").click(function() {
charge_id_no ++;
charge_count ++;
$('#charge_count').val(charge_count);
var newItem = $(".template_charge:first").clone();
newItem.find("input").attr("id", "chargeType_" + charge_id_no); //rewrite id's to avoid duplicates
newItem.find("input").attr("name", "chargeType_" +charge_id_no);
newItem.find("input").attr("id", "charge_" +charge_id_no); //rewrite id's to avoid duplicates
newItem.find("input").attr("name", "charge_" +charge_id_no);
newItem.show(); //show clone of template
$(".template_charge:last").after(newItem);
bindRemove();
});
/* Bind remove function to last added button*/
function bindRemove() {
$(".remove_charge:last").click(function(e) {
if ($(".remove_charge").length > 1)
$(this).parents(".template_charge").remove();
charge_count--;
$('#charge_count').val(charge_count);
});
}
/* Execute bind-function at startup */
bindRemove();
});
网页文件
Html 文件(如果用于单击添加按钮时正在创建的输入类型)。
<input type="hidden" id="charge_count" name="charge_count" value="0"/>
<div class="form-group col-md-12" id="other_charge">
<div class="form-group col-md-12 col-sm-12">
<label for="Other_charges" class="control-label col-md-2">Other Charges</label>
<button id="b2" class="btn btn-info add_charge col-md-10 col-sm-12" type="button">Add</button>
<div class="template_charge col-md-offset-2">
<div class="controls" id="profs">
<div id="field_charge" class="form-group input-append col-md-12">
<input autocomplete="off" class="input form-control col-md-5" id="field3" name="charge1" type="text" placeholder="Charge type" />
<input autocomplete="off" class="input2 form-control col-md-5" id="field4" name="charge2" type="text" placeholder="Charge" min="0" max="100" />
<button class="remove_charge btn btn-danger form-control col-md-2" type="button">X</button>
</div>
</div>
</div>
</div>
</div>
...有点猜测,看不到模板,但也许模板根已经是input
,所以调用find
返回零长度集,所以不起作用。试试这个...
newItem.find("input").attr(/* etc... */);
。应该读...
newItem.attr(/* etc... */);
相关文章:
- 在<输入类型=“;文件“/>
- 如何将输入类型值或id从一个jsp传递到另一个jsp页面
- 可以't将几个数字设置为<输入类型=“;数字“>
- 在输入类型日期中设置日期
- 如何将键入的文本从一个输入类型的文本复制到另一个
- 输入类型按钮返回历史记录并返回顶部
- 从HTML表单发布blob的表单输入类型是什么
- 输入类型文件的未捕获类型错误
- 如何在jQuery Mobile中设置100%宽度的输入类型日期
- 输入类型=文件验证停止其他输入类型验证
- 如何显示在输入类型文件中选择的文件
- jQuery Modal Popup-回发后输入类型设置为null
- 在控制器中将输入类型时间更改为秒
- 更改具有相同id的输入类型的所有值
- 对于每个输入类型,使用javascript获取值
- 输入类型范围在angularjs重复内不起作用
- 我如何使HTML5<输入类型=月份>以在所有浏览器上工作
- 如何调用两个函数是一种html输入类型
- 如何使按钮作为输入类型文件
- 可以设置输入类型=文件的文本框的高度