Why does this work in firefox but not in safari?

I have a little webform that pops up shadowbox style. The form then submits and the information is sent via ajax. This works a treat in firefox, however in safari, on pressing submit it closes the shadow box and seems to just submit the form (no ajax).

The html code of the button and stuff...

  <div id="booking_box_header"></div>
 <div id="booking_box_content">


  <div id="booking_box_left">


</div>

<div id="booking_box_right_container">

<form id="booking_form_1" method="post">

    <input name="event_开发者_运维问答id" value="4" type="hidden">
    <input name="time_id" value="18" type="hidden">
    <input name="booking_email" value="blah@domain.com" type="hidden">

    <div id="booking_box_right">
      <input name="booking_name" type="text"> 
      <input name="booking_mobile" type="text">

      <div id="ticket_select">
      <select name="booking_state" id="booking_state"></select>

         // the submit button
        <input id="next" value="Next" type="submit">

      </div>

    </div>
  </form>
</div>

The relevant Jquery code is as follows:

 $('#booking_form_1').submit(function() {

  var booking_email = $('input[name=booking_email]').val();
  var event_id = $('input[name=event_id]').val();
  var time_id = $('input[name=time_id]').val();

 // bring up the loading
  $('#booking_box_content').html(loader_img);

  // submit the data to the booking form again
  $.ajax({
    type: 'POST',
    url: 'process.php',
    cache: false,
    data: 'booking_step=1&event_id='+event_id+'&time_id='+time_id+'&booking_email='+booking_email+'',
    success: function(data) {
      $('#booking_box_content').html(data);
    }
  });


});

I'm wondering if safari doesn't like me rebinding the submit function because it seems to just be working as is as though I didn't even write any JS code... what do u think?

I think you need to add

return false;

after the ajax call to stop the default submit action from occuring.

Here's the EG from the api

$('#target').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});

I can't really speak for Safari, since I don't use it, but the symptom (form submission going ahead as usual) rings a bell with my past experiences. If a JavaScript event handler (such as onsubmit) throws an exception, the default action in pretty much every browser is to continue with whatever action the user initiated. You might consider using a JavaScript debugger (dunno if there are any for Safari) or wrapping the entire submit handler in a try/catch block and alert()ing the exception text. That could very well lead you straight to the real problem.

Try this jQuery instead. It uses the submit event of the form and jQuerys prevent default to stop the form from submitting. This is detailed in the documentation of the submit event.

 $('#booking_form_1').submit(function(e) {
  e.preventDefault();
  var booking_email = $('input[name=booking_email]').val();
  var event_id = $('input[name=event_id]').val();
  var time_id = $('input[name=time_id]').val();

 // bring up the loading
  $('#booking_box_content').html(loader_img);

  // submit the data to the booking form again
  $.ajax({
    type: 'POST',
    url: 'process.php',
    cache: false,
    data: 'booking_step=1&event_id='+event_id+'&time_id='+time_id+'&booking_email='+booking_email+'',
    success: function(data) {
      $('#booking_box_content').html(data);
    }
  });


});