title: Dropzone.js - How to attach clickable (upload button) dynamically
body: <p>Using <a href="http://www.dropzonejs.com/" rel="nofollow">dropzone.js</a> for drag'n'drop file upload, I would like to attach a file upload button dynamically.</p>
  
  <p>The page has a list of orders. When you select an order it is loaded through an Ajax call and shown. I instantiate Dropzone on the document.body at page load, in order to refuse uploads with a friendly error message until an order has been selected. When an order has been loaded an upload button is rendered with the order, and I would like to attach the Dropzone click handler to this dynamically created button. The button will be recreated every time a new order is selected.</p>
  
  <p>I just can't seem to figure out how to set/change the <code>clickable</code> Dropzone option after the Dropzone has been created.</p>
  
  <pre><code>var documentDropzone = new Dropzone(document.body, {
    url: '/path/to/upload.php',
    clickable: false,
    init: function() {
      this.on('sending', function(file, xhr, formData) {
        var order_id = parseInt($('#dropzone_order_id').val(), 10);
        formData.append('order_id', order_id);
      });
    },
    accept: function(file, done) {
      if (parseInt($('#dropzone_order_id').val(), 10)) done();
      else {
        showErrorMessage('Please select an order first');
        done('error');
      }
    },
    success: function(file, response) {
      // handle response
    }
  });
  
  $(document).on('click', '.view-opener', function(event) {
    event.preventDefault();
    $('#view-order').remove();
    var view = $('&lt;div id="view-order"&gt;&lt;/div&gt;')
      .prependTo('#inner-container-top');
    view.load(this.href, function(){
  
      // This is the failing line of code. The #dropzone-click-target 
      // is a button that is loaded with this ajax call.
      // (It also contains a hidden input with #dropzone_order_id 
      // which enables the upload functionality.)
      Dropzone(document.body, {clickable: '#dropzone-click-target'});
  
    });
  });
  </code></pre>
  
  <p>A fiddle is available here:</p>
  
  <p><a href="http://jsfiddle.net/tomas_eklund/761qr3r5/" rel="nofollow">http://jsfiddle.net/tomas_eklund/761qr3r5/</a></p>