如何通过jquery提交动态加载的表单？

Question

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

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

我该如何解决这个问题？

Answer 1

jQuery.load是一个异步函数。

这意味着当您尝试匹配“#loginBox表单”时，表单可能尚未可用。 要确保在加载表单后执行代码，必须将代码作为回调函数传递给加载。

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

顺便说一句 - 在你的情况下，使用 event.preventDefault（）或返回false 并不重要。它们都会阻止您的表单被提交。 （见event.preventDefault() vs. return false）

Answer 2

添加return false以防止出现默认行为：

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

Answer 3

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