Dropzone не работает при нажатии нового элемента с jQjuery

Question

У меня есть форму для создания статьи. Я использовал Dropzone для управления загрузкой файлов. Пользователю может потребоваться добавить новую Dropzone более одного. Итак, все работает, но согласитесь, когда я попытался нажать больше Dropzone через jQuery. Я думаю, что 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 каждый раз, когда вы нажимаете на кнопку, то вы должны добавить метод .dropzone() внутри события щелчка, для сНа элемента, который вы только что создали, и у вас есть некоторые ошибки в 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, поскольку нет никакого Dropzone элемента при загрузке страницы.