无法将 Dropzone 附加到 AJAX 加载的 DIV答案

【问题标题】：Cannot attach Dropzone to AJAX loaded DIV无法将 Dropzone 附加到 AJAX 加载的 DIV
【发布时间】：2015-07-29 05:43:55
【问题描述】：

我使用 Dropzone 来处理客户端图像上传。以下是我工作的一个非常基本的示例： http://www.dressorganic.co.uk/dropzone-test/noajax.htm

正如您在查看源代码时所看到的，我使用 JQuery 将 Dropzone 附加到 upload1 div ID。

但是，在以下示例中，我使用 AJAX 加载了 upload1 div： http://www.dressorganic.co.uk/dropzone-test/withajax.htm

很遗憾，我无法让 Dropzone 附加到 DIV。我知道我可以在包含要加载的 HTML 的 singleproductupload.asp 中插入 JQuery。但我更希望 JQuery 在父页面中。

这是主要的 HTML 页面：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Dropzone with AJAX</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="/dropzone-test/dropzone/4.0.1/dist/min/dropzone.min.css">

<script type="text/javascript">
//<![CDATA[
$(function() {

$("#upload1").dropzone({url: "/dropzone-test/handleupload.asp"});

$.ajax({
  type: 'POST',
  url: "/dropzone-test/singleproductload.asp",
  data: { ID: '1' },
  success: function(result) {
    $("#singleproductload").append(result);

  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert(textStatus + ": " + errorThrown);
  },

  async:true
});     


});  // JQuery
//]]>
</script>

</head>

<body>

    <div id="singleproductload">

    </div>

</body>
</html>

这是在 AJAX 中加载的 HTML 页面：

<div id="upload1" class="dropzone">

   <p>File uploader</p>

</div>

【问题讨论】：

请添加源文件
我已将源代码添加到主要问题中。不幸的是，我无法在 JS Fiddle 上使用它。

标签： javascript jquery ajax dropzone.js

【解决方案1】：

我现在已经解决了这里的问题： http://www.dressorganic.co.uk/dropzone-test/withajax-solution.htm

我不得不更改 AJAX 代码以在成功回调中声明 Dropzone：

$.ajax({
  type: 'POST',
  url: "/dropzone-test/singleproductload.asp",
  data: { ID: '1' },
  success: function(result) {
    $("#singleproductload").append(result);
    $("#upload1").dropzone({url: "/dropzone-test/handleupload.asp"});
  },
  error: function(XMLHttpRequest, textStatus, errorThrown) {
     alert(textStatus + ": " + errorThrown);
  },

  async:true
});

【讨论】：