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'>"); 
});