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

【问题标题】：jQuery can't use $.ajax on Dynamically loaded contentjQuery 不能在动态加载的内容上使用 $.ajax
【发布时间】：2012-03-23 08:33:52
【问题描述】：

我正在处理启用的登录表单 (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>

【问题讨论】：

标签： jquery jquery-load

【解决方案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');

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

【讨论】：

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

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

【讨论】：

谢谢。关于你的建议（块的东西）-> 那么，当我们使用像 JSMin 这样的压缩器压缩 JavaScript 文件时会发生什么？
@AbhishekBiswal 我相信，虽然我没有证实这一点，但这些压缩器会自动在您的代码中插入显式大括号（{，}）。在我看来，如果它错误地猜测它们应该去哪里，可能会再次导致问题。

【解决方案3】：

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

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

【讨论】：

值得指出的是，不建议使用document 作为绑定事件处理程序的静态元素，因为如果您有太多这样的处理程序，性能会受到影响。这就是 jQuery 远离 .live() 的主要原因，后者正是使用了这种技术。相反，他们建议绑定到更接近动态添加的内容的静态元素，以使事件免于冒泡到目前为止。有关更多详细信息，请参阅documentation for .on() 上的事件性能部分。

【解决方案4】：

e.preventDefault 停止或取消当前事件（如果可以取消），但是提交事件将继续向上传播 DOM 并可能导致提交触发。如果您真的要替换按钮的默认功能，您可以同时执行e.preventDefault 和e.stopPropagation，或者您可以只执行return false。

【讨论】：