jquery ajax calls are causing a page refresh

I have a button in my HTML page which is not part of any form.

<input type='button' id='submitter' value='add'/>

I have a click handler on it:

$('#submitter').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    var args={}
    $.get('notexists.php', args, function() {alert('what?');}, 'json')
         .error(function(){ alert('error'); });

    return false;
}

Now, notexists.php does not exist, so the click should alert error. But for some reason, The page refreshes with I click the button!

Some experiments I've tried to identify the problem:

1. 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 开发者_JAVA百科to no form.
2. removed teh $.post call - no refresh
3. enabled the firebug's "break on error" feature and tried clicking - refreshed again. so there is no error.
4. changed the post URL to something that exists and works - still refreshing
5. 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).
6. changed the input to a "div" with the same id. Same results - page gets refreshed.

Can anyone help?

PS: I'm using $.post in MANY other parts of this app, and its working as expected everywhere.

Have you checked $('#submitter').length when you attempt to bind the event? Maybe you have duplicate id's in the dom? Have you got your script running before the closing body tag or inside a jquery doc ready block?

Posting a fuller code sample would help to eliminate the questions I pose.

I believe your selector isn't selecting the button, so the event handler is not being applied.

Test your selector by doing something like:

 $("#submitter").val('Test');