Question

I have a page like this:

<form class="ajax" method="post" action="add_item.php">
[text input] [submit button]
</form>

[list any items the user has in a div here called #items]

When the user clicks the submit button, a function like this is called:

$("form.ajax").live('submit', function(event) {
 params = $(this).serialize();
 $.post($(this).attr("action"), params, function(data){
 json = $.parseJSON(data);
 // do stuff based on the json results
  if(json.success.action == 'replace'){
   $(json.success.container).html(json.success.message);
  }
  else{
   $(json.success.container).prepend(json.success.message);
   $(json.success.container).find(".item:first").slideDown();
  }

 });

 event.returnValue = false;
 return false;
});

This is supposed to load add_item.php into the #items div, and it works fine in FF, Chrome, Safari, just not IE. In IE (tested 7 and 8) when I click Submit it redirects the page to add_item.php rather than loading it into the #items div.
I tried adding event.preventDefault(); to the end of the function but that didn’t work.

Any ideas?

Answer 1

Hah!

Found a fix for it right after I posted that:
Moved the function to just below $(document).ready and added event.stopPropagation();