title: Clicking on one button to trigger click event on another
body: <p>I want to click on button 2 to trigger a click event on button 1. </p>
  
  <p>However, when I try the following, nothing happens when clicking on #2: no alert for #1 or #2.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;button id="button-1"&gt;Button 1&lt;/button&gt;
  &lt;button id="button-2"&gt;Button 2&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$('#container').on( "click", '#button-1', function(e){
      alert('CLICKED 1');
  });
  $('#container').on( "click", '#button-2', function(e){
      $('#button-1').trigger(e);
      alert('CLICKED 2');
  });
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/8RnBf/7/" rel="noreferrer">http://jsfiddle.net/8RnBf/7/</a></strong></p>
  
  <p>Moreover, if I put the #2 alert before the trigger, I end up with an infinite loop.</p>
  
  <p><strong><a href="http://jsfiddle.net/8RnBf/6/" rel="noreferrer">http://jsfiddle.net/8RnBf/6/</a></strong></p>
  
  <p>Why is this not working as expected?</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I should have made it clear: the original event must be passed. In essence, we're trying to do what was done <a href="https://stackoverflow.com/a/6091671/165673"><strong>here</strong></a>, but with delegated events</p>