title: jQuery trigger click triggers twice
body: <p>I have a checkout form that uses php to load some javascript &amp; html into <code>#Div-A</code> when the page loads.  The javascript binds a click event to <code>#Button-A</code> in the same div. Something like this:</p>
  
  <pre><code>&lt;div id="#Div-A"&gt;&lt;input type="button" id="Button-A"/&gt;
  &lt;script type="text/javascript"&gt;
      $('#Button-A').bind('click', function() {
      $.ajax({ 
          type: 'get',
          url: 'some/url/gets/called',
          success: function() { this happens on success }     
      });
  });&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Afterward, <code>#Global-Button</code> is created and a javascript function binds a different click event to this second button which then triggers <code>#Button-A</code> to be clicked like this:</p>
  
  <pre><code>$('#Global-Button').live('click', function(event) {
      $("#Button-A").trigger("click");
  })
  </code></pre>
  
  <p>The reason being that the contents of <code>#Div-A</code> can change (via ajax), so the second button acts as a global trigger regardless of which button or function happens to reside in <code>#Div-A</code>.</p>
  
  <p>The problem I'm encountering is that for some reason if #Global-Button is clicked after page load <code>#Button-A</code> gets triggered <em>twice</em>.  If an Ajax event reloads the contents of #Div-A then all is well and the the trigger happens only once as it should.</p>
  
  <p>I've examined the html within <code>#Div-A</code> before and after reloading via Ajax and everything appears to be identical.  There are definitely no duplicate buttons or functions anywhere as far as I can see that would cause two events to be triggered.</p>
  
  <p>I know only a very little about the DOM and can only guess this has something to do with the order in which things are loaded and events are bound.</p>