参考: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);" onclick="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);" onclick="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);" onclick="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>