javascript - Ajax 表单无法使用 event.preventDefault() 阻止页面重新加载；

Question

我有以下代码，应该通过 Ajax 提交表单，而无需重新加载页面:

$( document ).on('submit', '.login_form', function( event ){
    event.preventDefault();
    var $this = $(this);
    $.ajax({
        data: "action=login_submit&" + $this.serialize(),
        type: "POST",
        url: _ajax_login_settings.ajaxurl,
        success: function( msg ){

            ajax_login_register_show_message( $this, msg );

        }
    });
});

但是由于某种原因，尽管 event.preventDefault(); 函数应该阻止表单实际触发，但它实际上确实触发了。

我的问题是，如何防止上述表单重新加载页面？

谢谢

Answer 1

不要在文档上附加监听器，而是在提交按钮上使用单击处理程序并将类型更改为按钮。

<button id="form1SubmitBtn">Submit</button>
$('#form1SubmitBtn').click(function(){

  //do ajax here
});

快乐编码!!!