title: jquery ajax calls are causing a page refresh
body: <p>I have a button in my HTML page which is not part of any form.</p>
  
  <pre><code>&lt;input type='button' id='submitter' value='add'/&gt;
  </code></pre>
  
  <p>I have a click handler on it:</p>
  
  <pre><code>$('#submitter').click(function(e) {
      e.preventDefault();
      e.stopPropagation();
      var args={}
      $.get('notexists.php', args, function() {alert('what?');}, 'json')
           .error(function(){ alert('error'); });
  
      return false;
  }
  </code></pre>
  
  <p>Now, <code>notexists.php</code> does not exist, so the click should alert <code>error</code>. But for some reason, The page refreshes with I click the button!</p>
  
  <p>Some experiments I've tried to identify the problem:</p>
  
  <ol>
  <li>removed everything from the handler (no return false, no prevent default, no stop prop, no jquery post call - nothing) - the page did not refresh on click, and it should not. the button is not a submit button, and it dont belong to no form.</li>
  <li>removed teh $.post call - no refresh</li>
  <li>enabled the firebug's "break on error" feature and tried clicking - refreshed again. so there is no error.</li>
  <li>changed the post URL to something that exists and works - still refreshing</li>
  <li>added an "alert" after the $.post call - it did not get called. Seems like the execution breaks at $.post, but there's no error (experiment 3).</li>
  <li>changed the input to a "div" with the same id. Same results - page gets refreshed.</li>
  </ol>
  
  <p>Can anyone help? </p>
  
  <p>PS: I'm using $.post in MANY other parts of this app, and its working as expected everywhere.</p>