Jquery Ajax在移动和触摸屏设备上工作异常

我的应用程序中有一个动态表单，可以进行实时编辑（添加或删除输入字段），但当用户犯了一些错误并且没有正确填写某些内容时，我在验证方面遇到了一个问题，所有新添加的字段都将消失，这非常糟糕，因为用户必须重新创建以前的所有内容

为了解决这个问题，我创建了一个ajax调用来检查验证是否正常：

// send ajax first to check validation so that the dynamic fields don't disappear
$(document).on('touchstart mousedown', ':submit', function() {
    $('input[name="items"]').val($('.item').length);
    var form = $("form");
    var myMethod = '';
    var myRoute = '';
    var orderId = "<?php if (isset($order->id)) { echo $order->id; } else { echo false;} ?>";

    if( $(this).val() === 'Make new order' && !orderId){
        myMethod = 'post'
        myRoute = '/orders'

    } else {
        myMethod = 'post';
        myRoute = '/orders/edit/' + orderId;
    }

    $.ajax({
        type: myMethod,
        url: myRoute,
        headers: { 'X-CSRF-TOKEN': "{{csrf_token()}}" },
        data: form.serializeArray(),
        dataType: 'json',
        success: function(data){
            console.log('validation success!');
        },
        error: function(data) {
            var errors = data.responseJSON;
            var errorsArr = [];
            for (error in errors) {
                errorsArr.push(errors[error][0]);
            }
            bootbox.alert(errorsArr.join("<br>"));
            console.log(errors);

        }
    });
});

问题是，在电脑上一切正常，我收到了创建和编辑提交的验证消息，但在平板电脑和手机上，一切疯狂的事情都在发生

---

我在创建和编辑时收到双重验证错误，我收到了一条简短的验证消息，它消失了，我不知道在哪里调试这个…我如何才能看到手机上发生了什么？

您的代码就是这样触发的，因为您需要将提交按钮更改为常规按钮，然后，当发送用于检查验证的AJAX请求成功返回时，手动触发表单提交

您可以使用chrome的内置开发工具（通过改变屏幕大小）模拟移动设备。根据您的描述，听起来您的事件处理可能是一个问题。touchstart和mousedown是否有必要？因为你可以把鼠标放下来吗？这可以解释为什么会出现重复。您似乎也会覆盖所有“提交”功能。如果在该页面上有任何其他ajax触发，也会导致它“提交”，那么它将复制并表现出奇怪的行为。而是绑定到负责提交的按钮上？感谢您提供的chrome调试提示，我也遇到了同样的问题，但现在至少我可以看到，好的，双重消息是因为touchstart和mousedown…这很清楚…现在我不明白的是：为什么我尝试在编辑页面上提交时，我的验证消息会消失现在我知道了。。。这是因为移动和触摸设备上的超时…他们有这个超时足以使事情不能按我想要的方式工作…我如何解决这个问题？

public function store(OrdersForm $request)
{
    if($request->ajax()){ 

        return response()->json();

    } else {

        // save all...
    }
}