title: jQuery find closest button and trigger click
body: <p>I'm using <a href="https://mattketmo.github.io/darkroomjs/" rel="nofollow">Darkroom JS</a> to crop / manipulate images on the fly. However, I need the canvas to be saved (Via the floppy disk in the toolbar) before I process the image as base64.</p>
  
  <p>I thought I would try it with JQuery and target the particular element, However Darkroom doesn't give the toolbar items a specific class.</p>
  
  <p>So I'm looking at finding it via jQuery closest or similar and then triggering the click.</p>
  
  <p>The HTML that Darkoom Produces is as follows :</p>
  
  <pre><code>&lt;div class="darkroom-container"&gt;
    &lt;div class="darkroom-toolbar"&gt;
      &lt;div class="darkroom-button-group"&gt;
        &lt;button type="button" class="darkroom-button darkroom-button-default" disabled=""&gt;
        &lt;svg class="darkroom-icon"&gt;
          &lt;use xlink:href="#undo"/&gt;
        &lt;/svg&gt;
        &lt;/button&gt;
        &lt;button type="button" class="darkroom-button darkroom-button-default" disabled=""&gt;
        &lt;svg class="darkroom-icon"&gt;
          &lt;use xlink:href="#redo"/&gt;
        &lt;/svg&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="darkroom-button-group"&gt;
        &lt;button type="button" class="darkroom-button darkroom-button-default"&gt;
        &lt;svg class="darkroom-icon"&gt;
          &lt;use xlink:href="#rotate-left"/&gt;
        &lt;/svg&gt;
        &lt;/button&gt;
        &lt;button type="button" class="darkroom-button darkroom-button-default"&gt;
        &lt;svg class="darkroom-icon"&gt;
          &lt;use xlink:href="#rotate-right"/&gt;
        &lt;/svg&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="darkroom-button-group"&gt;
        &lt;button type="button" class="darkroom-button darkroom-button-default darkroom-button-active"&gt;
        &lt;svg class="darkroom-icon"&gt;
          &lt;use xlink:href="#crop"/&gt;
        &lt;/svg&gt;
        &lt;/button&gt;
        &lt;button type="button" class="darkroom-button darkroom-button-success"&gt;
        &lt;svg class="darkroom-icon"&gt;
          &lt;use xlink:href="#done"/&gt;
        &lt;/svg&gt;
        &lt;/button&gt;
        &lt;button type="button" class="darkroom-button darkroom-button-danger"&gt;
        &lt;svg class="darkroom-icon"&gt;
          &lt;use xlink:href="#close"/&gt;
        &lt;/svg&gt;
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="darkroom-button-group"&gt;
        &lt;button type="button" class="darkroom-button darkroom-button-default"&gt;
        &lt;svg class="darkroom-icon"&gt;
          &lt;use xlink:href="#save"/&gt;
        &lt;/svg&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="darkroom-image-container"&gt;
      &lt;div class="canvas-container" style="width: 556px; height: 556px; position: relative; -moz-user-select: none;"&gt;
        &lt;canvas class="lower-canvas" style="position: absolute; width: 556px; height: 556px; left: 0px; top: 0px; -moz-user-select: none;" width="556" height="556"&gt;&lt;/canvas&gt;
        &lt;canvas class="upper-canvas " style="position: absolute; width: 556px; height: 556px; left: 0px; top: 0px; -moz-user-select: none; cursor: crosshair;" width="556" height="556"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="darkroom-source-container" style="display: none;"&gt;
      &lt;div class="canvas-container" style="width: 600px; height: 600px; position: relative; -moz-user-select: none;"&gt;
        &lt;canvas class="lower-canvas" style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none;" width="600" height="600"&gt;&lt;/canvas&gt;
        &lt;canvas class="upper-canvas " style="position: absolute; width: 600px; height: 600px; left: 0px; top: 0px; -moz-user-select: none;" width="600" height="600"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I can get into the 4th button group using :</p>
  
  <pre><code>var button_group = $('.darkroom-button-group').eq(3);
  </code></pre>
  
  <p>But I am struggling to trigger the button.</p>
  
  <p>My current jQuery is as follows :</p>
  
  <pre><code>    var button_group = $('.darkroom-button-group').eq(3);
  
      button_group.closest('.darkroom-button').trigger('click');
  </code></pre>