Dropzone - 动态附加 dropzone div 不起作用答案

【问题标题】：Dropzone - dynamically append dropzone div not workingDropzone - 动态附加 dropzone div 不起作用
【发布时间】：2017-10-17 16:48:47
【问题描述】：

通过 jquery 动态附加的 Dropzone 不起作用。

我用于所有dropzone的方法都可以，但是需要点击两次才可以，同时google chrome返回错误。

追加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);，因为我需要它来记录输入中的值

【问题讨论】：

您在每次点击时添加一个带有 css 类 dropzone 的新元素。这可能适用于第一次点击，但是一旦您第二次点击，在第一次点击中添加的元素已经附加了 dropzone 会给您这个错误消息

标签： jquery dynamic append dropzone.js

【解决方案1】：

在

$(this).dropzone({

您正在创建一个新的拖放区。将该行更改为

Dropzone.options.myDropZone = {

并将“myDropZone”指定为附加 div 的 id，如下所示：

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

【讨论】：

【解决方案2】：

你需要分离默认自带的automaticall dropzone。

在您的 Javascript 文档就绪功能或加载文档中尝试一下。

Dropzone.autoDiscover = false;

然后像这样声明 dropzone。

 var $dropzone = new Dropzone('#dropzone', {
       *//all your settings here.*
    });

希望对你有帮助。

【讨论】：

如果使用jQuery，需要在document.ready之前调用Dropzone.autoDiscover = false