如何使用自定义确认对话框允许使用dropzone删除多个上传的文件？

Question

我想重写删除上传文件时Dropzone处理确认对话框的默认方式，我几乎达到了某种程度。这是我的代码。

Dropzone.confirm = function(question, accepted, rejected) { 
    showConfirm(question); 
    $(document).on('click', '#accept-confirm', function() { 
     hideConfirm(); 
     accepted(); 
    }); 
} 

showConfirm = function(question) { 
    var confirm_dialogue = '<div id="confirm-dialogue"><span class="question">'+question+'</span><button id="deny-confirm" class="button">Cancel</button><button id="accept-confirm" class="button">Yes</button></div>'; 
    $('body').append(confirm_dialogue).addClass('is-showing-confirm'); 
} 

hideConfirm = function() { 
    $('body').removeClass('is-showing-confirm'); 
    let dialogue = document.getElementById('confirm-dialogue'); 
    dialogue.parentNode.removeChild(dialogue); 
} 

我可以点击我的删除按钮，我的自定义确认显示。我可以确认删除并删除缩略图。

问题是我只能为一个图像做到这一点。对于我想删除的任何其他图像，我只是在控制台中出现以下错误。

Uncaught TypeError: Cannot read property 'removeChild' of null

Answer 1

你需要使用.on()因为它被应用到该按钮事件称为多次像以前一样使用.off()，

Dropzone.confirm = function(question, accepted, rejected) { 
    showConfirm(question); 
    $(document).off('click', '#accept-confirm').on('click', '#accept-confirm', function() { 
     hideConfirm(); 
     accepted(); 
    }); 
} 

或者你可以使用一次和外界把你的函数将Dropzone.confirm像，

Dropzone.confirm = function(question, accepted, rejected) { 
    showConfirm(question); 
} 
// now it will be called once only, 
$(document).on('click', '#accept-confirm', function() { 
    hideConfirm(); 
    accepted(); 
}); 

以及用于去除从DOM的元件使用.remove()，

hideConfirm = function() { 
    $('body').removeClass('is-showing-confirm'); 
    $('#confirm-dialogue').remove(); 
} 

您可以检查元素的长度（要删除）一样，

dialogue && dialogue.parentNode.removeChild(dialogue);