解决jquery或js动态添加easyUI元素时样式失效问题

最新推荐文章于 2022-01-04 16:13:38 发布

偷垃圾的猫

最新推荐文章于 2022-01-04 16:13:38 发布

阅读量3.3k

点赞数 1

本文链接：https://blog.csdn.net/cchhzzyy/article/details/79277121

版权

今天做项目时，遇到一个难题。循环添加easyUI的select下拉框时，样式不对。于是，我想了一些方法，比如直接写出来，但是全部隐藏，点击添加的时候，再一行一行显示出来（有点儿傻），可是下拉框是保证了样式，但是别的样式错误了。于是，我复制HTML最终生成的元素，进行添加看看，又发现下拉按钮不起作用了。
最后，我看了一下官方文档，发现 $.parser.parse(); 这个方法是可以对整个页面重新渲染的，渲染完之后就可以看到easyui原本的样式了。
HTML：

 <tr id="trAllowance1">
             <td><select class="easyui-combobox" name="language" style="width:152px;" id="txtAllowance1"></select>
             </td>
             <td><input type="text" id="txtThirdAmount1" class="inputText" /></td>
             <td><input type="text" id="txtThirdSoNo1" class="inputText" /></td>
             <td><input type="text" id="txtThirdProject1" class="inputText" /></td>
             <td><input type="text" id="txtThirdDescription1" class="inputText" /></td></tr>

js:

 var trId = $("#tabAllowance").find("tr").last().attr("id");
        trId = trId.substring(trId.length - 1, trId.length);
        trId = parseInt(trId) + 1;
        var trHTML = "<tr  id='trAllowance" + trId + "'><td><select class=\"easyui-combobox\"  name=\"language\" style=\"width:152px;\" id=\"txtAllowance" + trId + "\"></select></td>";
        trHTML = trHTML + "<td><input type='text' id='txtThirdAmount" + trId + "' class='inputText' /></td><td><input type='text' id='txtThirdSoNo" + trId + "' class='inputText' /></td><td><input type='text' id='txtThirdProject" + trId + "' class='inputText' /></td><td><input type='text' id='txtThirdDescription" + trId + "' class='inputText' /></td></tr>";
        $("#tabAllowance").append(trHTML);
        $.parser.parse("#tabAllowance");