javascript - jQ删除元素remove（）,当再次单击添加页面的时候会出现两个一样的页面（而我所要的是一个全新的页面），请问怎么做？

问题描述

问 题

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

当某个节点用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();
}

项目在线地址

解决方案

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

至于解决，看你这个show_imgspage()好像本来就是挂在.goimgs_btn的onclick上的，要不你干脆删掉这个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的事件监听混用~~

这篇关于javascript - jQ删除元素remove（）,当再次单击添加页面的时候会出现两个一样的页面（而我所要的是一个全新的页面），请问怎么做？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！