javascript - Subscribing multiple handlers to DOM Events with jQuery -

i attempting subscribe events css class. have 2 handlers, defined follows:

$(document).ready(function() {     $('.refresh-cart').click(         function(e) {             alert('refreshing');         });      $('form.ajax').submit(         function(e) {             e.preventdefault();             $.post(                 this.action,                 $(this).serialize(),                 function(data, textstatus, jqxhr) { alert('post'); },                 'text');         }     ); }); 

when these handlers overlap, not getting expected functionality.

this code works correctly, alerting 'post' , submitting ajax request.

 <form action="page.html" method="post" class="ajax">      <input type="text" name="sample" value="samplevalue" />      <input type="submit" />  </form> 

this code works correctly, alerting 'refreshing'

  <div class="refresh-cart">refresh widget</div> 

however, when these overlap (such in following example), 'refresh-cart' subscriber fires.

 <form action="page.html" method="post" class="ajax">      <input type="text" name="sample" value="samplevalue" />      <input type="submit" class="refresh-cart" />  </form> 

what doing wrong , how can make both handlers fire?

it works fine me..

you have close first alert box, though, before second can shown..

your code live @ http://jsfiddle.net/gaby/w3zc4/