在 Ajax 加载的表单中动态初始化 dropzone.js答案

【问题标题】：Dynamically initialize dropzone.js in Ajax-loaded Form在 Ajax 加载的表单中动态初始化 dropzone.js
【发布时间】：2017-10-19 18:07:58
【问题描述】：

我想以动态加载的形式使用 dropzone.js。这是我的实际代码。

实现源并将 autodiscover 设置为 false

<script src="scripts/dropzone.min.js"></script>
<script>
  Dropzone.autoDiscover = false;
</script>

我用 jquery 加载表单

$.ajax({
  method: "GET",
  url: "form.php",
  data: { user_id: userId }
}).done(function( result ) {
  $( ".user-details-"+userId ).append( result );
  var myDropzone = new Dropzone("div.dropzone", {
    url: "imageupload.ajax.php",
  });
});

将 ajax 调用的 html-result 附加到我的 div.user-details 后，dropzone 可以正常工作。但是当我关闭表单（从 dom 中删除）并再次加载时，我收到错误“Dropzone 已附加”。在我的控制台中。

如果我更改初始化并使用具有唯一 ID 的 div，也会发生此错误。

从 dom 中删除表单后如何销毁 dropzone？

【问题讨论】：

标签： javascript jquery ajax dropzone.js

【解决方案1】：

问题是你使用了一个类选择器div.dropzone

所以你应该检查这个类是否存在......&如果存在它是否已经包含一个dropzone..让它为空 $('div.dropzone').empty();

另一种方法是使用动态 ID

  var myDropzone = new Dropzone("div#dropzone", {

【讨论】：

div.dropzone 不包含 dropzone，因为它是通过 ajax 加载到 dom 中的。动态 ID myDropzone = new Dropzone("div#profileimage_"+internalUserID, {});也不行。

【解决方案2】：

var element = document.getElementById("#Your-DropZone-Element")
if (element.dropzone) {
    element.dropzone.destroy();
}

【讨论】：

通常，最好解释一下您的解决方案，而不是仅仅发布一堆代码行。