为什么这个工作在Firefox中，但不是在Safari浏览器？

Question

我有一个弹出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代码一样......你觉得怎么样？

Answer 1

我认为你需要添加

return false; 

Ajax调用后停止默认从存在的提交操作。

这里从api

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

Answer 2

我真的不能说Safari，因为我没有使用它，但症状（表单提交像往常一样提前）与我过去的经验敲响了一个钟声。如果JavaScript事件处理程序（如onsubmit）引发异常，几乎每个浏览器的默认操作都将继续执行用户发起的任何操作。你可以考虑使用JavaScript调试器（不知道是否有用于Safari的）或者将整个提交处理程序封装在try/catch块中，并将异常文本包装起来。这很可能会导致你直接面对真正的问题。

Answer 3

是在EG试试这个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); 
    } 
    }); 


});