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

最新推荐文章于 2021-06-26 16:51:42 发布

转载最新推荐文章于 2021-06-26 16:51:42 发布 · 4.4k 阅读

本文介绍在使用jQuery的append()方法动态添加包含EasyUI组件的元素时遇到的样式丢失问题，并提供了解决方案，即使用$.parser.parse()重新解析DOM元素。

参考：http://blog.youkuaiyun.com/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>