我遇到了以下问题。下面是我的PHP页面是什么以及它们是如何工作的。当我直接访问form.php并尝试通过AJAX提交它时，它运行得很好。
问题-当我将（）form.php加载到main.php中时，form.php中的jQuery代码都不会触发。（通过firebug验证）没有提交，没有警报，什么都没有。当它被加载到main.php中时，我如何让form.php中的jQuery代码工作？
main.php->这是一个php主页，上面有一个链接。点击这个链接后，下面的jQuery代码将在一个名为#formcontainer的div中加载"form.php"。这是main.php中加载form.php的代码。
<a href="#" id="addHomeProfile">Foobar</a>
<div class="formcontainer"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#addHomeProfile").click(function(){
$(".formcontaineropen").load("form.php");
});
});
</script>
form.php->这是上面加载的一个表单。它通过jQuery.ajax（）POST向MySQL提交数据。这是提交表单的jquery代码，表单有一个名为#homeprofile的ID。
<form id="homeprofile"> <input type="text" name="name" id="name" />
<input type="submit" value="submit" id="submit"></form>
<script type = "text/javascript">
$(document).ready(function() {
$('#homeprofile').submit(function(e){
e.preventDefault();
alert("form submitted");
$.ajax({ // Starter Ajax Call
type: "POST",
url: 'update.php',
data: $('#homeprofile').serialize(),
});
});
});
使用on（）
$(document).on('submit','#homeprofile',function(e){
e.preventDefault();
alert("form submitted");
$.ajax({ // Starter Ajax Call
type: "POST",
url: 'update.php',
data: $('#homeprofile').serialize(),
});
return false;
});
您应该使用.on()语法来定位动态创建的元素（初始渲染后由JS或jQuery加载到DOM中的元素）
良好
// in english this syntax says "Within the document, listen for an element with id=homeprofile to get submitted"
$(document).on('submit','#homeprofile',function(e){
//stop the form from submitting
e.preventDefault();
// put whatever code you need here
});
不如
// in english this syntax says "RIGHT NOW attach a submit listener to the element with id=homeprofile
// if id=homeprofile does not exist when this is executed then the event listener is never attached
$('#homeprofile').on('submit',function(e){
//stop the form from submitting
e.preventDefault();
// put whatever code you need here
});
希望这能有所帮助！
小问题是您在jquery调用中引用了formcontaineropen（这可能是打字错误？）。原因是通过AJAX加载的JS代码将被解释（因此不需要eval（）），但文档就绪事件将立即被触发（可能是在AJAX加载内容实际插入并准备好文档之前，因此提交事件可能无法正确绑定）。相反，您需要将代码绑定到AJAX请求的成功，类似于以下内容：
main.php：
<html>
<a href="#" id="addHomeProfile">Foobar</a>
<div class="formcontainer"></div>
<script src='jquery.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$("#addHomeProfile").click(function(){
$(".formcontainer").load("form.php", '',
function(responseText, textStatus, XMLHttpRequest) {
onLoaded();
});
});
});
</script>
form.php：
<form id="homeprofile"> <input type="text" name="name" id="name" />
<input type="submit" value="submit" id="submit"></form>
<script type="text/javascript">
function onLoaded() {
$('#homeprofile').submit(function(e){
e.preventDefault();
alert("form submitted");
$.ajax({ // Starter Ajax Call
type: "POST",
url: 'update.php',
data: $('#homeprofile').serialize(),
});
});
};
</script>
我的解决方案有些奇特，但无论如何，它就在这里。
这将是您的主要.php:
<a href="#" id="addHomeProfile">Foobar</a>
<div class="formcontainer"></div>
<script type="text/javascript">
$(document).ready(function(){
$("#addHomeProfile").click(function(){
$(".formcontaineropen").load("form.php", '', function(response){
var res = $(response);
eval($('script', res).html());
});
});
});
</script>
这是你的表格。hp:
<form id="homeprofile"> <input type="text" name="name" id="name" />
<input type="submit" value="submit" id="submit"></form>
<script type = "text/javascript">
$('#homeprofile').submit(function(e){
e.preventDefault();
alert("form submitted");
$.ajax({ // Starter Ajax Call
type: "POST",
url: 'update.php',
data: $('#homeprofile').serialize(),
});
});
</script>