AJAX Posts multiple times in Chrome

http://cl.ly/2D221O0J33421Y1v2V0Q

Is there any way to avoid this?

Works perfectly in Firefox, etc.

v开发者_JAVA技巧otes.php: http://pastie.org/1369778

jQuery(function(){
jQuery("a.vote_down").click(function(){
 //get the id
 the_id = $(this).attr('id');

 // show the spinner
 $(this).parent().html("<img src='images/spinner.gif'/>");

 //the main ajax request
  $.ajax({
   type: "POST",
   data: "action=vote_down&id="+$(this).attr("id"),
   url: "/votes.php",
   success: function(msg)
   {
    $("span#votes_count"+the_id).fadeOut();
    $("span#votes_count"+the_id).html(msg);
    $("span#votes_count"+the_id).fadeIn(1000);
    $("span#vote_buttons"+the_id).remove();
   }
  });
 });
});

Have you tried having your click handler return false; (placed at the end of the function, of course)? Or, try taking an argument in on that handler called e, and add e.stopPropagation();

Bottom line is, you wanna prevent the click event from bubbling once you've handled it.

if it is href event do the following at the end of the code

event.preventDefault(); // this is better way of doing

http://api.jquery.com/event.preventDefault/

or

return false;

You can try to use the "delegate" method instead of the "click" shortcut. The "$.delegate" prevents event "bubbling" by assigning the event to the context of the element instead of the window object.

Also, if you are you using an "anchor" with an empty "href" parameter, you could try to use another HTML element, like a span.