jquery - 内部函数中的 event.preventDefault()

Question

看来我错过了 jquery 的一些基本概念，因为这个脚本 不会做我想做的事:

    $(document).ready(function(){

    $('#form').submit(function(event) {
    console.log( "submitted form, checking #domain_url_input ");
    // event.preventDefault(); 
    var submit_error=false; 
    var is_primary_url = false;
    var url = $('#domain_url_input').val();

    var get_url = '/i.php?a=check&url2check=' + escape(url);
    var valid_data = $.ajax({
        event: event,
        url: get_url,
        success: function(response) {
            // alert('ajax successful'); 
            is_primary_url = $(response).find('#check_div').text(); 
            // alert(is_primary_url);

            var dns_zone    = $('#dns_zone_sel').val(); 

            if (is_primary_url == 'YES' && dns_zone=='') 
                { 
                event.preventDefault();
                alert('Choosing a DNS ZONE is required!');
                $('#dns_zone_sel').focus(); 
                this.submit_error=true; 
                // if (submit_error==true) event.preventDefault(); 
                // return 'error'; 
                } // 

            } // end func success
        }); // ajax  

    }); // submit

    }); // rdy

(当然，我减少了一些代码。)

代码运行完美，除了:

event.preventDefault();

不会生效。

如果我把它放在第二行之后

$('#form').submit(function(event) {...

但是它会起作用。

ajax 调用有效，我得到了积极的结果。 好像不可能再阻止提交了？

之后的警报:

event.preventDefault(); alert('需要选择 DNS 区域!');

工作完美，这意味着该脚本工作正常，除了 PreventDefault() 没有效果。 这可能是由于我没有适当的访问权限的事件“事件”？

意图是:

我想停止提交事件。 我在旧的js脚本中通过“return false;”做到了这一点 但这也行不通。 顺便说一句:我知道 PreventDefault() 和“return false”之间的区别，...我只是添加我尝试过的信息。在这种情况下，“return false”将从 $(...).ajax() 返回到 $(...).submit() 事件。

要点是:当 $().ajax 部分仍在执行请求时，表单 Submit() 已经在进行中。所以我需要让submit()等待ajax完成？

感谢您的任何想法!

在这一切之后，以下解决方案完全按照我的意愿工作 - 感谢我的 friend Andreas、@Cory 和 @Michael:

`<script type="text/javascript">
$(document).ready(function(){
var disableSubmit   = false;
var transmitNow     = false;
$('#form').submit(function(event) {
    console.log( "submitted form, checking #domain_url_input ");
    console.log( "disableSubmit=" + disableSubmit); 
    if( transmitNow === true ) return;  
    event.preventDefault(); 
    if (disableSubmit ===true) return; 
    $('#form').prop( 'disabled', true );
    var submit_error=false; 
    var is_primary_url = false;
    var url = $('#domain_url_input').val();
    if (url=='') { alert('Error! A domain/url must be provided!'); return false; } 

    var get_url = '/i.php?a=check&ajax=1&url2check=' 
                        + escape(url) + '&t='+ Date.now();

    disableSubmit   = true; // Formular ausgrauen .... als todo 
    var valid_data = $.ajax({
        url: get_url,
        error: function(){ disableSubmit = false; $('#form').prop( 'disabled', false ); },
        complete: function(){ disableSubmit = false; $('#form').prop( 'disabled', false ); },
        success: function(response) {
            disableSubmit = false; 
            $('#form').prop( 'disabled', false );

            is_primary_url = $(response).find('#is_url_primary_check_div').text(); 

            var registrar   = $('hd[registrar]').val(); 
            var webserver   = $('hd[webserver]').val(); 
            var dns_zone    = $('#dns_zone_sel').val(); 

            if (is_primary_url == 'YES' && dns_zone=='') 
                { 
                // event.preventDefault();
                alert('You entered a primary domain. Choosing a DNS ZONE is required!');
                $('#dns_zone_sel').focus(); 
                submit_error=true; 
                }   
            if (submit_error != true ) 
                { 
                transmitNow = true; 
                $('#form').submit();
                }  
            } // end event func success
        }); // ajax  

    }); // submit

}); // rdy
    </script>`

感谢大家! :) 快乐!

Answer 1

正如 Cᴏʀʏ 所解释的，您的 .preventDefault() 调用不起作用，因为在 $.ajax() 调用完成时表单已经提交。

解决此问题的一种方法是始终直接在 submit() 回调中调用 .preventDefault()，然后在您的验证成功，显式调用不带参数的 submit() 来提交表单。

此外，您可能希望在等待 Ajax 请求时禁用表单的输入字段和提交按钮。这还可以让您避免在进行显式 submit() 调用时让 submit() 回调执行任何操作。

说明这个想法的简化版本:

var disableSubmit = false;
$('#form').submit( function( event ) {
    event.preventDefault();
    if( disableSubmit ) return;
    disableSubmit = true;
    $('#form input, #form button').prop( 'disabled', true );
    $.ajax({
        ...
        success: function( data ) {
            if( dataIsGood(data) ) {
                $('#form').submit();
                disableSubmit = false;
                $('#form input, #form button').prop( 'disabled', false);
            }
        }
    });
});

这里没有处理一些错误和边缘情况 - 例如，如果您从服务器收到错误响应，或者根本没有收到响应怎么办？但这可能是一个起点。