Question

我正在使用登录表单（AJAX）。当用户点击链接时，该登录框将显示为浮动模式。使用jQuery的$（）。load函数从另一个页面加载该登录框的内容。点击链接登录框加载。但是，当我在该表单上实现AJAX提交时：

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

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

$(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>

Answer 1

更改

$("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');

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

Answer 2

使用.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解释器有时会在第一行之后插入分号，这可能会破坏您的代码。

有关详细信息，请参阅Automatic Semicolon Insertion页面中Javascript Garden部分。

Answer 3

您必须使用.on（）方法

委托动态元素

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

Answer 4

如果可以取消，

e.preventDefault会停止或取消当前事件，但是提交事件将继续向上传播，并且无论如何都可能导致提交。如果您确实要替换按钮的默认功能，则可以同时执行e.preventDefault和e.stopPropagation，也可以return false。

jQuery不能在动态加载的内容上使用$ .ajax

4 个答案: