极客观点
项目管理
HarmonyOS
问题：
1、一开始只是把html给追加过去。但是这样产生的结果是点击追加后的datebox不起作用。经过群里网友建议后我用深度克隆，这次是有作用了，但克隆后的datebox选择值触发的是克隆之前的datebox值也显示在datebox中。
2、经过一番折腾，我放弃了深度克隆，而是浅克隆通过easyui的$.parser.parse()解析器，解析我克隆后的datebox这次有效果但是datebox出现了两个。小弟学艺不精本，为这问题纠结了一天，恳请各位伸出援手帮助帮助小弟。
JS代码如下：
function btnAdd(){
var blockNum=10;
var parentDom=$('body').find("form"),oriDom=parentDom.children(":first");
var clLength=parentDom.children().length;
if(blockNum>clLength){
var nowDom=oriDom.clone();
//var nowDom=oriDom.html();
//nowDom.children(":first").text('字段');
parentDom.append(nowDom);
$.parser.parse();
}
else return false;
}
HTML代码如下：
<body style="background-color: #F7F7F7">
<div style="margin-top: 10px">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-edit'" style="width:60px" onclick="btnAdd()">添加</a>
</div>
<form action="" name="DataFieldForm">
<fieldset>
<legend>字段</legend>
<!--<div class="easyui-panel" title="登记信息"
style="height: auto; width: 100%;overflow: hidden;"
data-options="iconCls:'icon-2012081511913',collapsible:true,border:false">
--><input type="hidden" name="fieldID" value="${dataFieldVO.fieldID}"/>
<input type="hidden" name="sourceID" value="${dataFieldVO.dataSourceVO.sourceID}"/>
<table align="center" style="width: 100%" class="tableForm">
<tr>
<th style="width: 15%;background-color: #DBF0FF"><font style="color: red">*</font>数据源：</th>
<td align="left">
<input class="easyui-combobox" style="width: 75%; " name="sourceID" value=""
data-options="required:'true',editable:false,valueField:'code',textField:'name',multiple:false,url:'<%=path%>/dataSource/getWriteDict.action'">
</td>
<th style="width: 15%;background-color: #DBF0FF"><font style="color: red">*</font>字段名称:</th>
<td style=""><input style="width: 75%;" class="easyui-textbox"
name="name" value="${dataFieldVO.name}"
data-options="required:'true'"></td>
<th style="background-color: #DBF0FF"><font style="color: red">*</font>字段代码:</th>
<td><input style="width: 75%;" class="easyui-textbox"
name="code" value="${dataFieldVO.code}"
data-options="required:'true'"></td>
</tr>
<tr>
<th style="width: 15%;background-color: #DBF0FF"><font style="color: red">*</font>字段类型:</th>
<td style="" >
<input style="width: 75%;" class="easyui-combobox"
name="fieldType" value=""
data-options="required:'true',editable:false,valueField:'code',textField:'name',multiple:false,
data:[{'code':1,'name':'数值'},{'code':2,'name':'字符'},{'code':3,'name':'日期'}]
">
</td>
<th style="width: 15%;background-color: #DBF0FF"><font style="color: red">*</font>字段分类:</th>
<td>
<input style="width: 75%;" class="easyui-combobox"
name="fieldKind" value="" style="width: 240px"
data-options="required:'true',editable:false,valueField:'code',textField:'name',multiple:false,
data:[{'code':1,'name':'查询字段'},{'code':2,'name':'统计字段'},{'code':3,'name':'分组字段'}
,{'code':4,'name':'可选条件字段'},{'code':5,'name':'强制条件字段'},{'code':6,'name':'隐藏条件字段'}
]
"/>
</td>
<th style="width: 15%;background-color: #DBF0FF"><font style="color: red">*</font>条件类型:</th>
<td style="" >
<input style="width: 75%;" class="easyui-combobox"
name="matchType" value=""
data-options="required:'true',editable:false,valueField:'code',textField:'name',multiple:false,
data:[{'code':0,'name':'精确字符串(xx)'},{'code':1,'name':'半模糊字符串(xx%)'},{'code':2,'name':'全模糊字符串(%xx%)'},{'code':3,'name':'数值(=XX)'}
,{'code':4,'name':'范围型数值(>=xx and <= yy)'},{'code':5,'name':'日期(<|>|=yyyy/mm/dd)'},{'code':6,'name':'范围型日期'},{'code':7,'name':'布尔型(1:是；0：否)'}
,{'code':8,'name':'枚举:(xx$yy$zz)'},{'code':9,'name':'字典表(表名 如)(统一用name关联查询不用code)'}
]
">
</td>
</tr>
<tr>
<th style="width: 15%;background-color: #DBF0FF"><font style="color: red">*</font>是否对应字典表:</th>
<td>
<input style="width: 75%;" class="easyui-combobox"
name="isDictValue" value="${dataFieldVO.isDictValue}" style="width: 240px"
data-options="required:'true',editable:false,valueField:'code',textField:'name',multiple:false,
data:[{'code':0,'name':'不对应'},{'code':1,'name':'对应字典表代码'},{'code':2,'name':'对应字典表值'},{'code':3,'name':'枚举数值'}
]
"/>
</td>
<th style="width: 15%;background-color: #DBF0FF"><font style="color: red">*</font>字典表名称:</th>
<td style=""><input style="width: 75%;" class="easyui-textbox"
name="dictTable" value="${dataFieldVO.dictTable}"
data-options=""></td>
<th style="background-color: #DBF0FF"><font style="color: red">*</font>枚举值:</th>
<td><input style="width: 75%;" class="easyui-textbox"
name="enumValues" value="${dataFieldVO.enumValues}"
data-options=""></td>
</tr>
</table>
</fieldset>
<!--</div>
--></form>
<div align="center" style="margin-top: 20px">
<a class="easyui-linkbutton " iconCls="icon-save" onclick="doSave();" style="width:80px">保存</a>
</div></body>
不论是从代码可维护性，jquery事件绑定方面来看，都最好不要用克隆
准备好一个隐藏起来的模版，如果你对你的代码掌控的比较好，使用 oriDom.html()
将初始化内容，初始化触发事件，分别做初始化函数
每次追加，运行这两个初始化函数
你这样的想法并不可取，对于拷贝的 dom 对象，我们很难去控制它接下来的行为，因为你并不知道 jquery 是怎么对待它们的。
如果你要绑定事件，我建议你使用，当每次出现
name='matchType'的元素时（只在 tableForm 范围内有效），你都不需要再重新绑定事件