0

我正在处理启用的登录表单 ( AJAX )。当用户点击链接时，该登录框以浮动模式出现。该登录框的内容是使用 jQuery 的 $().load 函数从另一个页面加载的。单击链接时，登录框会加载。但是，当我在该表单上实现 AJAX 提交时：

$(document).ready(function(){
    $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ });
});

但是表单提交正常，没有遵循函数中给出的内容，即（防止默认 - 提交并使用AJAX）。那么这是否意味着在 DOM 中不考虑加载的内容或脚本无法读取它？我只加载一次内容：

$(document).ready(function(){
    if($("#loadedform").html() == "")
    { $(this).load('/load/login.html'); }
    $(".login-modal').slideDown('slow');
});

结构：

<div class="login-modal"><div id="loadedform"></div></div>

要加载的内容：

<form id="loginbox" method="post" action="xyz.html">
<!-- INPUT Boxes and Submit Button -->
</form>
4

4 回答 4

2

改变

$("form#loginbox").submit(function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

至

$('#loadedform').on("submit", "form#loginbox", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

或者如果您使用的是 1.7 之前的版本：

$('#loadedform').delegate("#loginbox", "submit", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

这是因为事件是在页面加载时注册的，所以当你的表单加载时它没有附加事件。此更改将在 dom 中的更高级别注册事件，因此任何新内容也将起作用。

看起来您应该将加载表单的代码更改为：

if($("#loadedform").html() == "") { 
    $("#loadedform").load('/load/login.html'); 
}
$(".login-modal').slideDown('slow');

否则，您将无法将其加载到正确的位置。

于 2012-03-23T08:39:40.347 回答
1

使用检索的页面上的脚本.load()不会运行，因此您尝试通过 AJAX 提交表单的第一个脚本不会运行。

相反，移动第一个脚本，使其在.load()完成时运行，使用回调：

$(document).ready(function(){
    if($("#loadedform").html() == "") { 
         $(this).load('/load/login.html', function() {
             $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ });
         }); 
    }
    $(".login-modal').slideDown('slow');
});

另外，尽量不要像在 Javascript 中那样使用括号样式：

// some statement that begins a block here
{ doStuff(); }

这是因为 Javascript 解释器有时会在第一行之后插入分号，这可能会破坏您的代码。

有关详细信息，请参阅Javascript Garden页面中的自动分号插入部分。

于 2012-03-23T08:44:15.923 回答
0

您必须使用 .on() 方法委派动态元素

$(document).on("submit","#loginbox", function() {
 e.preventDefault(); 
 /*AJAX function here*/
});
于 2012-03-23T08:37:11.463 回答
0

e.preventDefault如果可以取消，则停止或取消当前事件，但是提交事件将继续向上传播 DOM，并且无论如何都会导致提交触发。如果您真的要替换按钮的默认功能，您可以两者都做e.preventDefault，e.stopPropagation也可以只做return false.

于 2012-03-23T08:40:05.537 回答