为什么这在 Firefox 中有效，但在 safari 中无效？答案

【问题标题】：Why does this work in firefox but not in safari?为什么这在 Firefox 中有效，但在 safari 中无效？
【发布时间】：2010-11-09 06:29:36
【问题描述】：

我有一个弹出 shadowbox 样式的小网络表单。然后提交表单并通过 ajax 发送信息。这在 Firefox 中是一种享受，但是在 Safari 中，按下提交时它会关闭影子框，并且似乎只是提交表单（没有 ajax）。

按钮和东西的html代码...

  <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>

相关的Jquery代码如下：

 $('#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);
    }
  });


});

我想知道 safari 是否不喜欢我重新绑定提交函数，因为它似乎就像我什至没有编写任何 JS 代码一样工作......你怎么看？

【问题讨论】：

标签： jquery safari

【解决方案1】：

我认为你需要添加

return false;

在 ajax 调用后阻止默认提交操作发生。

这是来自api的EG

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

【讨论】：

【解决方案2】：

我不能真正代表 Safari，因为我不使用它，但症状（表单提交照常进行）对我过去的经历敲响了警钟。如果 JavaScript 事件处理程序（例如 onsubmit）抛出异常，几乎每个浏览器的默认操作都是继续执行用户发起的任何操作。您可能会考虑使用 JavaScript 调试器（不知道是否有用于 Safari）或将整个提交处理程序包装在 try/catch 块中并alert()ing 异常文本。这很可能让你直接找到真正的问题。

【讨论】：

【解决方案3】：

试试这个 jQuery。它使用表单的提交事件和 jQuerys prevent default 来阻止表单提交。这在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);
    }
  });


});

【讨论】：