在编写动态插入删除DOM元素时,Easyui控件渲染效果失败的问题

在项目中需要一个动态插入删除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这样的提示都显示不出来。

这里写图片描述

加上之后,显示正常了

这里写图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黄宝康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值