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

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

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

但形式提交正常，没有什么之后在函数给出，即（阻止默认 - 提交并使用AJAX）。那么这是否意味着Loaded内容不被考虑在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>

来源

2012-03-23 Abhishek Biswal

更改

$("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-23 08:39:40

你必须委派比使用。对动态元素（）方法

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

来源

2012-03-23 08:37:11 Starx

值得指出的是，使用'document'因为你要绑定的事件处理程序是不建议，因为如果你有太多这样的处理性能将遭受静态元素。这就是为什么jQuery远离'.live（）'的原因，它完全使用了这种技术。相反，他们建议绑定到更接近动态添加内容的静态元素，以便将事件从现在不得不冒泡。有关更多详细信息，请参见[.on（）']（http://api.jquery.com/on/）的文档中的事件性能部分。 – GregL 2012-03-23 08:49:18

@GregL，可能是Richard D，也需要阅读你的评论。 – Starx 2012-03-23 08:53:12

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

来源

2012-03-23 08:40:05

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

相反，移动是第一个脚本，以便在运行时完成，使用回调：

$(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的部分获取更多细节。

来源

2012-03-23 08:44:15 GregL

谢谢。关于你的建议（块事情） - >那么，当我们使用压缩器如JSMin压缩JavaScript文件时会发生什么？ – 2012-03-23 15:46:52

@AbhishekBiswal我相信，虽然我还没有证实这一点，那些压缩机自动插入明显的括号（{''，'}'）在你的代码。这发生在我身上，如果它错误地猜测他们应该去的地方，可能会再次引发问题。 – GregL 2012-03-25 23:22:22

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

回答

相关问题