Dropzone - 動態附加dropzone div不工作

Question

Dropzone動態附加jQuery不工作。

我用於所有的dropzone的方法正在工作，但需要點擊兩次然後纔可以工作，同時谷歌瀏覽器返回給我一個錯誤。

代碼附加懸浮窗的：

方法

$('.button').click(function() { 
    $('.target').append("<div class='dropzone sales_proof_pic' data-proof-user-id='0'><div class='dz-message dropzone_placeholder color_khaki2' data-dz-message><span>UPLOAD<br>SALES<br>PROOF</span></div></div><input type='hidden' name='proof_id[0]' class='proof_pic_id'>"); 
}); 

代碼：通過瀏覽器

$(document).on('click', '.sales_proof_pic', function() { 
    var proof_pic = $(this); 
    $(this).dropzone({ 
     url: 'url', 
     acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg", 
     maxFiles: 1, 
     addRemoveLinks: true, 
     sending: function(file, xhr, formData) { 
     formData.append("_token", "{{ csrf_token() }}"); 
     formData.append("usage", "NOTICE"); 
     }, 
     init: function(){ 
     this.on("success", function(file, response) { 
      file.previewElement.id = response; 
      proof_pic.siblings('.proof_pic_id').val(response); 
     }); 

     this.on("removedfile",function(file){ 
      var _ref; 
      return (_ref = file.previewElement) != null ? 
_ref.parentNode.removeChild(file.previewElement) : void 0; 
     }); 
     }, 
     removedfile: function(file) { 
     var id = file.previewElement.id; 
     $.ajax({ 
      type: 'GET', 
      url: '/admin/assets/delete/'+id, 
      success: function(response){ 
       proof_pic.siblings('.proof_pic_id').val(""); 
      } 
     }); 
     } 
    }); 
}); 

錯誤回報：

Uncaught Error: Dropzone already attached. 
    at new c (dropzone.min.js:1) 
    at HTMLDivElement.<anonymous> (dropzone.min.js:2) 
    at Function.each (jquery.js:384) 
    at m.fn.init.each (jquery.js:136) 
    at m.fn.init.undefined.jQuery.fn.dropzone (dropzone.min.js:2) 
    at HTMLDivElement.<anonymous> (create:355) 
    at HTMLDocument.dispatch (jquery.js:4670) 
    at HTMLDocument.r.handle (jquery.js:4338) 

有什麼辦法來解決這個問題？我的var proof_pic = $(this);不能被刪除，因爲我需要這個在輸入

Answer 1

記錄值在

$(this).dropzone({ 

要創建一個新的懸浮窗區域。該行更改爲

Dropzone.options.myDropZone = { 

，並指定 「myDropZone」 爲ID爲追加DIV如下：

$('.button').click(function() { 
    $('.target').append("<div id="myDropZone" name="myDropZone" class='dropzone sales_proof_pic' data-proof-user-id='0'><div class='dz-message dropzone_placeholder color_khaki2' data-dz-message><span>UPLOAD<br>SALES<br>PROOF</span></div></div><input type='hidden' name='proof_id[0]' class='proof_pic_id'>"); 
});