js动态拼接标签，样式丢失的解决方法

来源：互联网发布：java 多线程编辑：程序博客网时间：2024/06/02 00:37

参考：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>

阅读全文

0 0