在项目中需要一个动态插入删除DOM元素的输入页面,在使用Jquery操作的时候,遇到了Easyui控件textbox的样式渲染失败的问题。
我的代码是这样的。
<!-- 动态组织介绍图表 -->
<div id="orgInfoPie" class="body-box" style="border: 1px dotted #333;">
<p style="text-align: center;font-size: 16px;font-weight:bold; color: #81A6DD;" >组织介绍图表</p>
<div style="margin: 20px auto;width:90%;border: 1px dotted #333">
<div style="margin:20px 0 0 20px;">
<label class="Validform_label">图表名称:</label><input type="text" style="width:70%;" class="easyui-textbox" data-options="required:true,prompt:'请输入图表名称'"/>
</div>
<div style="margin:20px 0 20px 20px">
<label class="Validform_label">图表数据:</label><input type="text" style="width:70%;" class="easyui-textbox" data-options="required:true,prompt:'请输入图表数据'"/>
</div>
</div>
<a id="add" href="javascript:void(0);" class="easyui-linkbutton" style="border-radius: 4em; width: 80px; background: #9a748a; margin: 0 0 15px 70px; color: white">添加</a>
</div>
<script>
// 增加图表点击事件
$("#add").click(function(){
var copyNode = $("<div style=\"margin: 20px auto;width:90%;border: 1px dotted #333\">"
+"<div style=\"margin:20px 0 0 20px;\">"
+"<label class=\"Validform_label\">图表名称:</label><input type=\"text\" style=\"width:70%;\" class=\"easyui-textbox\" data-options=\"required:true,prompt:'请输入图表名称'\"/>"
+"</div>"
+"<div style=\"margin:20px 0 20px 20px\">"
+"<label class=\"Validform_label\">图表数据:</label><input type=\"text\" style=\"width:70%;\" class=\"easyui-textbox\" data-options=\"required:true,prompt:'请输入图表数据'\"/>"
+"</div>"
+"<a href=\"javascript:void(0);\" onclick=\"deleteDOM(this);\" class=\"easyui-linkbutton\" style=\"float:right; border-radius: 4em; width: 80px; background: #9a748a; margin:-65px 30px 0 0; color: white\">删除</a>"
+"</div>");
copyNode.insertBefore($(this));
$.parser.parse(); //只有加上了这句才渲染成功,网上查找到的解决方案,平时我们前台开发的时候不经常用,因为这个是EasyLoader的加载方式(智能加载),按需加载js
});
// 删除DOM元素
function deleteDOM(node){
$(node).parent().remove();
}
</script>
解决方法是加入$.parser.parse();
未加这句渲染失败的效果,像placeholder这样的提示都显示不出来。
加上之后,显示正常了