easyui input未设id导致的问题

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

今天又踩了一个坑，大致是没有给input设id，使用类选择器绑定easyui控件，然后使用name设值，现在值设进去后界面没有显示。

做的界面部分截图如图：

点击下面两个橙色的按钮，通过调用下面的方法动态添加html来添加控件，没点击一次就会添加一组控件到界面：

revert(value){
let rStr = `<div class="rowBox bigBox">
<div class="col">
<span class="ui-color-red">*</span>
<span class="bigFont">${this.formatterPerType (value)}赠送:</span>
<input name="ticketDefineNo${this.reTicketIndex}" class="easyui-ticketForCheck ticketForCheck" data-options="width:142,height:28,readOnly:true">
<input name="ruleTicketDefineNo${this.reTicketIndex}" type="hidden"/>
<input name="ticketName${this.reTicketIndex}" type="hidden"/>
<span>面额</span><input name="preferentialValue${this.reTicketIndex}" type="text" disabled="disabled"/><span>元</span>
<span class="ui-color-red">*</span>
<input name="preferentialQty${this.reTicketIndex}" class="requiredValidateIntQty" type="text" maxlength=4 />
<span>张</span>
</div>
<a class="easyui-linkbutton removeEnjoy">删除此项-</a>
</div>`;
return rStr;
}

上面的this.reTicketIndex每加一组控件会递增1，就是说各个input的name不会重复。

添加完控件后，会再次调用下面这段js通过类选择器.requiredValidateIntQty给name="preferantialQty${this.reTicketIndex}"绑定easyui-numberbox控件：

$.each($(".requiredValidateIntQty"),function(i,e){
if(!$(e).hasClass("numberbox-f")){
$(e).numberbox({
required: true,
min:1,
max:9999,
precision:0,
width:139,
height:26,
validType: ['intOrFloatGtZero']
});
}
})

界面加载数据时，通过

$(`input[name=preferentialQty]`,$("#reTicketForm")).val(qty);设值，发现界面没显示值，但是通过调用$(`input[name=preferentialQty]`,$("#reTicketForm")).val();又能获取到设进去的值。想着既然绑定了easyui-numberbox，应该使用numberbox的setValue方法设值，于是使用$(`input[name=preferentialQty]`,$("#reTicketForm")).numberbox("setValue",qty);设值，

于是在console敲如这行代码，但是报错了，大意是$(`input[name=preferentialQty]`,$("#reTicketForm"))这个input没有绑定numberbox控件。

检查html源码，如图：

绑定easyui-numberbox插件的inpu变成了图中红色框框内的样子，界面显示的是红框中第一个input，而通过$(`input[name=preferentialQty]`,$("#reTicketForm"))选择器获取到的是最底下那个input,这个input的type是hidden,而且这个input的确没有绑定easyui-numberbox控件，难怪调用$(`input[name=preferentialQty]`,$("#reTicketForm")).numberbox("setValue",qty);设值会报错。

想着我们一帮都是通过元素的id获取一个标签，然后给这个标签绑定控件，那如果给input设值一个id会怎样呢，

于是动态添加的html里面给input加了一个id属性，如图：