Dropzone - dropzone divが動的に追加されない

Question

jqueryによって動的に追加されるDropzoneは機能しません。

すべてのdropzoneで使用する方法は機能していますが、2回クリックするだけで作業できます。同時にGoogle Chromeでエラーが返されます。アペンドドロップゾーンの

コード：メソッドの

$('.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) 

は、問題を解決する方法はありますか？私はあなたが新しいドロップゾーンエリアを作成している

$(this).dropzone({ 

で入力

Answer 1

に値を記録し、これを必要とするので、私はvar proof_pic = $(this);、削除することはできません。

Dropzone.options.myDropZone = { 

にその行を変更し、次のようにアペンドのdivのidとして "myDropZone" を割り当てる：

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