0

如题,我想做的是单击添加按钮,添加一个新的元素,单击删除按钮,这个元素删除,再次单击添加的时候,会出现两个这样的元素?官方的解释是这样的:

当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。

请问我该怎么删除,才能避免这种情况呢?
删除之后,第二次添加,页面会出现两个:

图片描述

这是js代码部分:

var editor = new wangEditor('textarea');
//上传图片路径
editor.config.uploadImgUrl = '/Wap/WapUserFileUpload/FileUpload';
// 表情
editor.config.emotions = {
    'default': {
        'title': "默认",
        'data': '/depend/wangEditor/test/emotions.js'
    }
}
editor.config.menus = [
    'img',
    'goimgs'
];
editor.UI.menus.img = {
    normal: '<div class="selectImage">选择图片</div>'
}
editor.UI.menus.imgs = {
    normal: '<div class="goimgs">插入链接</div>'
}
//显示添加图集页面
function show_imgspage() {
    var appedStr = '<div id="imgs_page"><form><textarea class="imgspage_txt" placeholder="图集说明..."></textarea>' +
        '<div class="Imgs_box"><div class="Img_box Add_img">' +
        '<div class="addbtn_box"><img src="images/Camer.png"/><input class="upload-file" id="upload-file" type="file" onchange ="uploadFile(this,1)" name="file" capture="camera" accept="image/*" cropid="1"></div>' +
        '<p>添加项目图片</p>' +
        '</div>' +
        '</div>' +
        '<div onclick="insertLink()" id="sub_addimgs">完成添加</div></form></div>';
    $(".goimgs_btn").click(function () {
        console.log("显示添加图集");
        $("#post_report").after(appedStr);
    });
}
// 隐藏掉插入网络图片功能。该配置,只有在你正确配置了图片上传功能之后才可用。
editor.config.hideLinkImg = true;
editor.create();

//选择图片上传服务器
function uploadFile(obj, type) {
    var a = $("upload-file").val();
    console.log(a)
    $.ajaxFileUpload({
        url: "http://www.iduilv.com/Wap/WapUserFileUpload/FileUpload",
        secureuri: false,// 一般设置为false
        fileElementId: "upload-file",// 文件上传表单的id
        dataType: 'json',// 返回值类型 一般设置为json
        data: { 'type': type, "type2": 2 },

        success: function (data) // 服务器成功响应处理函数
        {
            //成功后将图片出入的页面
            var src = data.src;
            var addStr = '<dl class="Imgbox"><dt>' + '<img src=' + src + '/><img class="close" onclick="delImgbox()" src="images/icon_close.png"/></dt>' +
                '<dd><input id="imgtxt" placeholder="添加文字描述"/></dd>'
            '</dl>';
            var Add_img = $(".Imgs_box .Add_img");
            //按钮块之前插入图片
            Add_img.before(addStr);
            console.log("上传成功");
        },
        error: function (data)// 服务器响应失败处理函数
        {
            console.log("服务器异常");
        }
    });
    return false;
}
//删除图片块
function delImgbox() {
    $(this).parent().parent().remove();
}
//完成添加后输入框插入链接
function insertLink() {
    console.log("完成添加");
    editor.command(null, 'insertHtml', '<p onclick="show()">百度!</p>');
    $("#imgs_page").remove();
}

项目在线地址

查看全部 6 个回答

1

已采纳

应该是那个show_imgspage()里的问题,里边你注册了个click事件回调,但是在remove时并没注销掉,导致每次调用这个函数就会多注册个事件,所以你每次触发click时,生成的DOM也是成倍增长的。

至于解决,看你这个show_imgspage()好像本来就是挂在.goimgs_btnonclick上的,要不你干脆删掉这个onclick属性好了,然后把show_imgspage()打开,写成:

$(".goimgs_btn").click(function () {
    console.log("显示添加图集");
    var appedStr = '<div id="imgs_page"><form><textarea class="imgspage_txt" placeholder="图集说明..."></textarea>' +
        '<div class="Imgs_box"><div class="Img_box Add_img">' +
        '<div class="addbtn_box"><img src="images/Camer.png"/><input class="upload-file" id="upload-file" type="file" onchange ="uploadFile(this,1)" name="file" capture="camera" accept="image/*" cropid="1"></div>' +
        '<p>添加项目图片</p>' +
        '</div>' +
        '</div>' +
        '<div onclick="insertLink()" id="sub_addimgs">完成添加</div></form></div>';
    $("#post_report").after(appedStr);
});

这样不就得了~

另外建议,不要on-和js的事件监听混用~~

推广链接