如何使用jquery停止动态加载的表单提交？

Question

我正在开发一个 AJAX 登录系统。目前，当用户点击“登录”链接时，登录表单会动态加载。由于我使用 AJAX，所以当用户单击提交按钮时，我希望防止表单实际提交。我尝试将以下代码作为我的加载函数的一部分，并且表单正确加载，但表单仍然正常提交。

$('#loginBox').load('loginform.php');
$('#loginBox form').submit(function(event) {
 event.preventDefault();
});

我该如何解决这个问题？

- Zak

Answer 1

jQuery.load是一个异步函数。

这意味着当你尝试匹配"#loginBox form"时，表单可能（还）不可用。 为了确保在表单加载后执行您的代码，您必须将代码作为回调函数传递给load。

$('#loginBox').load("form.html", function() {
    $('#loginBox form').submit(function(event) {
        event.preventDefault();
    });
});

顺便说一下 - 在你的情况下，无论你使用event.preventDefault()还是return false都没有关系。它们都可以防止表单被提交。(参见event.preventDefault() vs. return false)

- codecraft

Answer 2

在这段代码中加入 "return false" 以防止默认行为的发生：

$('#loginBox form').submit(function(event) {
   return false;
});

- amurra

Answer 3

    $('#loginBox form').submit(function(event) {
return false;
});

- Vivek Goel