javascript - 元素未在 iOS 表单提交中显示

Question

我想要什么:
提交表单时显示“订单处理”元素。

我做了什么:

$("#register").validate({
  errorPlacement: function(error, element) { },
  submitHandler: function(form) {
    $('.processing-wrapper').removeClass('hidden');
    form.submit();
  }
});

我遇到的情况:

• 在桌面上，一切都按预期工作 - https://www.youtube.com/watch?v=n7zOsmA6qCA
• 在 iOS 上我从未见过 “订单处理”元素 - https://www.youtube.com/watch?v=t5xbYchqJpE

我尝试过的:

• 我注释掉了 form.submit();只是为了看看“订单处理”元素是否会出现在 iOS 上，它确实出现了。但是当提交表单时，我从来没有看到处理元素。
• 我尝试添加 setTimeout 来延迟表单提交，看看是否可以让“订单处理”元素有更多时间在 iOS 上显示，但在实际提交表单时遇到了问题。

超时更新

$("#register").validate({
  errorPlacement: function(error, element) { },
  submitHandler: function(form) {
    $('.processing-wrapper').removeClass('hidden');
    setTimeout(function(form) {
      form.submit();
    }, 2500);
  }
});

通过这次更新，我确实看到了“Order Processing”元素，但也收到错误“TypeError: Cannot read property 'submit' of undefined”

回顾:

• 知道为什么“订单处理”元素没有显示在 iOS 上吗？
• 关于让 setTimeout 实际工作有什么建议吗？

如能为我指明正确的方向，我们将不胜感激!

Answer 1

超时方法是正确的解决方法，但是您收到错误是因为您已将匿名函数设置为接受 form覆盖 form 的参数外部范围的并且为空，因此错误。只需删除该参数，它就可以正常工作:

$("#register").validate({
    errorPlacement: function(error, element) { },
    submitHandler: function(form) {
        $('.processing-wrapper').removeClass('hidden');
        setTimeout(function() { // no parameter here
            form.submit();
        }, 50);
    }
});

请注意，计时器延迟可以更短，我在示例中将其减少到 50 毫秒。您需要做的就是确保在提交发生之前调用删除类，以便 UI 有机会更新。