如何在Safari提交表单之前执行JQuery

How to execute JQuery BEFORE Safari submits form

本文关键字：执行 JQuery 表单 提交 Safari      更新时间：2023-09-26

我遇到了一个问题，这个问题似乎只是Safari中的一个问题。我有一个覆盖，在它的css中设置为display:none。当用户单击提交时，我希望覆盖显示，直到处理完成。我最初只是将它绑定到jquery中按钮的on('click'...函数。除了Safari之外，这一切都很好。Safari希望在点击调用之前执行提交。因此，基于我发现的其他一些事情，我把这一切都放在表单的提交事件上，而不是点击，并使用了一个设置为0的超时对象。像这样：

$('#tcmi-shop-cart-checkout').submit(function(){
    var showOverlay = function(){$('#processing-overlay').css('display','block')};
     setTimeout(showOverlay,0);
});

这同样适用于除Safari之外的所有其他浏览器。Safari仍然希望在执行此操作之前提交表单数据并等待响应。如何使Safari在提交数据之前显示此覆盖？

您尝试过preventDefault（）吗？

如果你只是通过表单发布一些数据，你可以这样做（在伪代码中）：

#form.submit() {
  preventDefault()
  setOverlay(true)
  POST()
    .then(setOverlay(false))
}

基本上，您希望阻止默认的表单提交，然后立即显示覆盖，然后使用ajax提交表单数据。当回调函数完成时，您可以访问它，在那里您可以关闭覆盖。

我假设该按钮是一个"提交"按钮，并且通过单击它触发的提交事件在javascript有机会显示覆盖之前就被触发了。尝试使用javascript提交表单，并使用preventDefault从按钮中获取提交事件，如下所示：

$(function() {
    $('#submitButton').click(function(e) {
        $('#processing-overlay').css('display', 'block');
        $('#tcmi-shop-cart-checkout').submit();
        e.preventDefault();
    });             
});

尝试

$("#tcmi-shop-cart-checkout").on("click", function(e) {
   e.preventDefault();
   e.stopPropagation();
    var el = $(this), elem = $("#processing-overlay");
    var settings = {};
    settings.url = el.attr("action");
    settings.type = el.attr("method");
    settings.context = elem;
    settings.data = el.serialize();
   elem.toggle(function() {
       $.ajax(settings)
       .then(function success(data, textStatus, jqxhr) {
         console.log(data);
         $(this).toggle()
       }, function error(jqxhr, textStatus, errorThrown) {
         console.log(textStatus, errorThrown)
       })
    })
});

jsfiddlehttp://jsfiddle.net/bmLkauzp/

我遇到了同样的问题，我用解决了它

$(document).on("click", "input[type='"submit'"]", function (e) {
    e.preventDefault();
    var $form = $(this).closest("form"),
    // Do whatever you want
    setTimeout(function () {
        $form.unbind('submit').submit();
    }, 200);
});

如果你愿意，你可以为safari浏览器添加额外的检查。

删除setTimeout，它应该可以正常工作。调用setTimeout时，您正在将函数推送到事件队列并释放线程，此时正在进行表单提交。

代码中：

$('#tcmi-shop-cart-checkout').submit(function(){
    $('#processing-overlay').css('display','block');
});

我最终不得不做一个疯狂的破解来实现这一点。它基本上是上面提到的preventDefault（）和其他一些东西的组合。因为这是一个Drupal表单，如果我使用form.submit（），它会使用我在表单上的"后退"按钮，而不是实际的提交，这会导致明显的问题。所以我不得不使用实际的提交按钮来触发。这基本上涉及到触发对按钮的第二次调用。第一次显示覆盖，然后再次调用submit并实际触发submit。这是代码：

        var submitOpen = true;
        $('#edit-submit-order').on('click',function(e){
          if (submitOpen) {
               e.preventDefault();
               $('#processing-overlay').css('display','block');
               submitOpen = false;
               setTimeout(function(){$('#edit-submit-order').trigger('click')},5);
          } else {
               submitOpen = true
          }
        });

这对我有效。它不是"干净的"，但它有效：）

var someForm = $('.someform');
var someOverlay = $('.someOverlay');
someForm.on('submit', function(e) {
    e.preventDefault();
    someForm.off('submit');
    someOverlay.fadeIn('fast', function(){
        someForm.submit();
    });
});
相关文章：