使用jQjuery推送新元素時，Dropzone不起作用

Question

我有一個表單來創建文章。我使用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()方法click事件中，爲您剛剛創建的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因爲沒有任何懸浮窗元素在頁面加載時。