title: Dynamically initialize dropzone.js in Ajax-loaded Form
body: <p>I would like to use dropzone.js in a dynamically loaded form. This is my actual code.</p>
  
  <p>Implement the source and set autodiscover to false</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="scripts/dropzone.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    Dropzone.autoDiscover = false;
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I load the Form with jquery</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$.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",
    });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>After the html-result from the ajax-call is appended to my div.user-details the dropzone works without problems. But when I close the Form (remove from dom) and load it again I´ve got the error "Dropzone already attached." in my console.</p>
  
  <p>This error also occours, if I change the initialization and use a div with a unique id.</p>
  
  <p>How can I destroy the dropzone after remove the form from the dom?</p>