title: Event handler for click event fires automatically - jQuery
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/7102413/why-does-click-event-handler-fire-immediately-upon-page-load">Why does click event handler fire immediately upon page load?</a>  </p>
  </blockquote>
  
  
  
  <p>There is a gap in my understanding of Javascript's function so I have trouble understanding why my event handlers get fired automatically if I define it without an anonymous wrapper.</p>
  
  <p><strong>HTML</strong></p>
  
  <p></p>
  
  <pre><code>&lt;a href="#" id="change-html"&gt;Change HTML&lt;/a&gt;
  </code></pre>
  
  <p><strong>Javascript #1</strong></p>
  
  <p></p>
  
  <pre><code>var btn = $('#change-html');
  btn.click(bindClick(btn)); // bindClick gets executed right away and only once
  
  function bindClick(source){
      console.log('get here');
  }
  </code></pre>
  
  <p><strong>Javascript #2</strong></p>
  
  <p></p>
  
  <pre><code>var btn = $('#change-html');
  btn.click(function(){
      bindClick(btn); // bindClick is only executed on the anchor's click event 
  });
  
  function bindClick(source){
      console.log('get here');
  }
  </code></pre>