jQjueryで新しい要素をプッシュすると、Dropzoneが機能しない

Question

Articleを作成するフォームがあります。私はDropzoneを使ってアップロードファイルを管理しました。新しいDropzoneを複数追加する必要があるかもしれません。だから、すべてが動作していますが、jQueryを使用してDropzoneをさらにプッシュしようとしたときに受け入れられます。私はDropzoneが再び始まらないと思います。

$('.btn-add').click(function (e) { 
    e.preventDefault(); 
    var element = ''; 
    element = '<div class="article-item ui-state-default">' 
    + '<div class="dropzone dropzone-previews multiple-upload>' 
    + '</div>'; 
    ('#sortable').append(element); 
}); 



Dropzone.autoDiscover = false; 
    $('div.multiple-upload').dropzone({ 
     acceptedFiles : '.png, .gif, .jpg', 
     dictCancelUpload : '', 
     dictCancelUploadConfirmation : '', 
     maxFilesize : 100, 
     addRemoveLinks : true, 
     init: function() { 
      thisDropzone = this; 
      var extractEle = thisDropzone.element.className; 
      var extractClass = extractEle.split(' '); 
      var obj = $('.' + extractClass[3]); 
      var filename = $(obj).find('.media-item').val(); 
      var file_array = []; 
      if (filename !== '') { 
       file_array = filename.split(','); 
      } 

      for (var index = 0; index < file_array.length; index++) { 
        var mockFile = {name: file_array[index], size: 75}; 
        thisDropzone.options.addedfile.call(thisDropzone, mockFile); 
        thisDropzone.options.thumbnail.call(thisDropzone, mockFile, BASE_URL + '/articles/' + file_array[index]); 
      } 
      }, 
      url: BASE_URL + '/writer/articles/upload' 
}); 

Answer 1

あなたがボタンをクリックするたびにドロップゾーンを作成する場合は、あなたがクリックイベント内.dropzone()メソッドを追加する必要があり、作成したばかりのdiv要素のために、また、あなたがvar element文字列に多少の誤差があります。ここで

例：

$('.btn-add').click(function (e) { 
    e.preventDefault(); 
    var element = ''; 
    element = '<div class="article-item ui-state-default">' 
    + '<div class="dropzone dropzone-previews multiple-upload">' 
    + '</div></div>'; 
    $('#sortable').append(element); 


    $('div.multiple-upload').last().dropzone({ 
     acceptedFiles : '.png, .gif, .jpg', 
     dictCancelUpload : '', 
     dictCancelUploadConfirmation : '', 
     maxFilesize : 100, 
     addRemoveLinks : true, 
     init: function() { 
      thisDropzone = this; 
      var extractEle = thisDropzone.element.className; 
      var extractClass = extractEle.split(' '); 
      var obj = $('.' + extractClass[3]); 
      var filename = $(obj).find('.media-item').val(); 
      var file_array = []; 
      if (filename !== '') { 
       file_array = filename.split(','); 
      } 

      for (var index = 0; index < file_array.length; index++) { 
       var mockFile = {name: file_array[index], size: 75}; 
       thisDropzone.options.addedfile.call(thisDropzone, mockFile); 
       thisDropzone.options.thumbnail.call(thisDropzone, mockFile, BASE_URL + '/articles/' + file_array[index]); 
      } 
     }, 
     url: BASE_URL + '/writer/articles/upload' 
    }); 
}); 

はちょうどこの特定のケースでは、ページのロード時にいずれかのドロップゾーン要素が存在しないのでDropzone.autoDiscover = falseを追加する必要がないことに注意してください。