如何使用自定義確認對話框允許使用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);