参考:http://blog.csdn.net/u010552788/article/details/49363107
今天使用jquery的append()方法来拼接,发现拼接的元素引用的easyui样式丢失。原因是easyui只在最初页面加载的时候进行一次性渲染。
想要的效果:
之前的效果:
起作用的代码:
var tagobj = $('#append'); $.parser.parse(tagobj);
页面相关代码:
<fieldset class="fieldset_jy">
<legend class="legend_jy">气瓶信息</legend>
<div style="padding-left: 5px;" id="append">
<ul class="_searcher new-line">
<li>出厂日期:
<input id="outputDate1" name="outputDate" type="text" class="easyui-datebox"
required="true" style="width: 150px;" validType="date"
value="" data-options="formatter:ww4,parser:w4"/>
</li>
<li>出厂编号:
<input id="serialNumber1" name="serialNumber" type="text" class="easyui-validatebox"
required="true" style="width: 130px;" value=""
validType="midLength[0,50]" invalidMessage="50个字符之间!"/>
</li>
<li>起用日期:
<input id="enableDate1" name="enableDate" type="text" class="easyui-datebox"
required="true" style="width: 150px;" validType="date"
value="" data-options="formatter:ww4,parser:w4"/>
</li>
<li>下次检验日期:
<input id="nextTestDate1" name="nextTestDate" type="text" class="easyui-datebox"
required="true" style="width: 150px;" validType="date"
value="" data-options="formatter:ww4,parser:w4"/>
</li>
<li>制造单位:
<input id="makeCompany1" name="makeCompany" type="text" class="easyui-validatebox"
required="true" style="width: 130px;" value=""
validType="midLength[0,100]" invalidMessage="100个字符之间!"/>
</li>
<li>
<a id="query" href="javascript:void(0);" οnclick="addLineJs()" class="easyui-linkbutton" iconCls="icon-add" style="vertical-align: middle;">添加</a>
</li>
</ul>
</div>
</fieldset>
相关js代码:
<script type="text/javascript">
function addLineJs(){
var outputDate1 = $("#outputDate1").val();
var serialNumber1 = $("#serialNumber1").val();
var enableDate1 = $("#enableDate1").val();
var nextTestDate1 = $("#nextTestDate1").val();
var makeCompany1 = $("#makeCompany1").val();
var num = $('#append .new-line').length;
alert(num);
var html2 = '';
var arrOutputDate = new Array();
$("input[name='outputDate']").each(
function(){
arrOutputDate.push($(this).val());
}
)
var arrSerialNumber = new Array();
$("input[name='serialNumber']").each(
function(){
arrSerialNumber.push($(this).val());
}
)
var arrEnableDate = new Array();
$("input[name='enableDate']").each(
function(){
arrEnableDate.push($(this).val());
}
)
var arrNextTestDate = new Array();
$("input[name='nextTestDate']").each(
function(){
arrNextTestDate.push($(this).val());
}
)
var arrMakeCompany = new Array();
$("input[name='makeCompany']").each(
function(){
arrMakeCompany.push($(this).val());
}
)
for(var i=1;i<=num;i++){
var outputDate = 'outputDate' + (i + 1);
var serialNumber = 'serialNumber' + (i + 1);
var enableDate = 'enableDate' + (i + 1);
var nextTestDate = 'nextTestDate' + (i + 1);
var makeCompany = 'makeCompany' + (i + 1);
html2 += '<ul class="_searcher new-line">';
html2 += '<li>出厂日期:<input id="' + outputDate + '" name="outputDate" type="text" class="easyui-datebox" required="true" style="width: 150px;" validType="date" value="" data-options="formatter:ww4,parser:w4"/> </li>';
html2 += '<li>出厂编号:<input id="' + serialNumber + '" name="serialNumber" type="text" class="easyui-validatebox" required="true" style="width: 130px;" value="" validType="midLength[0,50]" invalidMessage="50个字符之间!"/> </li>';
html2 += '<li>起用日期:<input id="' + enableDate + '" name="enableDate" type="text" class="easyui-datebox" required="true" style="width: 150px;" validType="date" value="" data-options="formatter:ww4,parser:w4"/> </li>';
html2 += '<li>下次检验日期:<input id="' + nextTestDate + '" name="nextTestDate" type="text" class="easyui-datebox" required="true" style="width: 150px;" validType="date" value="" data-options="formatter:ww4,parser:w4"/> </li>';
html2 += '<li>制造单位:<input id="' + makeCompany + '" name="makeCompany" type="text" class="easyui-validatebox" required="true" style="width: 130px;" value="" validType="midLength[0,100]" invalidMessage="100个字符之间!"/> </li>';
html2 += '<li> <a id="query" href="javascript:void(0);" οnclick="removeLineJs()" class="easyui-linkbutton" iconCls="icon-remove" style="vertical-align: middle;">删除</a></li>';
html2 += '</ul>';
}
var html = '';
html += '<ul class="_searcher new-line">';
html += '<li>出厂日期:<input id="outputDate1" name="outputDate" type="text" class="easyui-datebox" required="true" style="width: 150px;" validType="date" value="" data-options="formatter:ww4,parser:w4"/> </li>';
html += '<li>出厂编号:<input id="serialNumber1" name="serialNumber" type="text" class="easyui-validatebox" required="true" style="width: 130px;" value="" validType="midLength[0,50]" invalidMessage="50个字符之间!"/> </li>';
html += '<li>起用日期:<input id="enableDate1" name="enableDate" type="text" class="easyui-datebox" required="true" style="width: 150px;" validType="date" value="" data-options="formatter:ww4,parser:w4"/> </li>';
html += '<li>下次检验日期:<input id="nextTestDate1" name="nextTestDate" type="text" class="easyui-datebox" required="true" style="width: 150px;" validType="date" value="" data-options="formatter:ww4,parser:w4"/> </li>';
html += '<li>制造单位:<input id="makeCompany1" name="makeCompany" type="text" class="easyui-validatebox" required="true" style="width: 130px;" value="" validType="midLength[0,100]" invalidMessage="100个字符之间!"/> </li>';
html += '<li> <a id="query" href="javascript:void(0);" οnclick="addLineJs()" class="easyui-linkbutton" iconCls="icon-add" style="vertical-align: middle;">添加</a> </li>';
html += '</ul>';
html2 += html;
$("#append").empty();
$("#append").append(html2);
var tagobj = $('#append');
$.parser.parse(tagobj);
}
</script>