jquery .load不执行$ ajax函数

我写了一些代码，其中一个html文件（file1.html）加载另一个html文件（file2.html）。 file2.html（一个表单页面）包含一些小型的php代码（调用session_start（）），一些表单字段和一些jquery javascript函数，包括一个$ .ajax（）函数，该函数在输入输入时调用php文件。当file1.html加载file2.html时，除了$ .ajax（）函数外，file2.html的所有jquery javascript函数都执行得很好。当我在浏览器中加载file2.html（带有$ .ajax（））时，$ .ajax函数可以正常工作。然后，我试图通过将$ .ajax函数从file2.html移动到file1.html中来解决该问题，如下面的代码所示，但没有成功。

我该在哪里出错？（我在http://api.jquery.com/load/检查，并期待在这个网站让我在正确的方向，但无法找到一个类似的问题。

请你帮忙。

代码的file1.html（用$就功能移动从file2.html）

<script src="js/jquery-1.10.1.min.js"></script> 

</head> 
<body> 

<script> 
$(document).ready(function(){ 
    $("#myForm").submit(function(){ 

     $.ajax({ 
      type: "POST", 
      url: "step2_submit2ajx.php", 
      data: $("#myForm").serialize(), 
      dataType: "json", 

      success: function(msg){ 
       $("#formResponse").removeClass('error'); 
       $("#formResponse").addClass(msg.statusgeneral); 
       $("#formResponse").html(msg.statusgeneral); 


      }, 
      error: function(){ 
       $("#formResponse").removeClass('success'); 
       $("#formResponse").addClass('error'); 
       $("#formResponse").html("There was an error submitting  
the form. Please try again."); 
      } 
     }); 

     //make sure the form doesn't post 
     return false; 

    }); //.ajax 

}); 

</script> 

<script> 
$(document).ready(function(){ 
    $("#section1").load("file2.html"); 


}); 
$('#page1').show(); 
$('#page2').hide(); 
</script> 

<div id="page1"> 
page 1 
<div id="section1"> 

</div> 
<button onclick="toPage2();" type="button">< to Page 2</button> 
</div> 

<div id="page2" style="display:none;"> 
page 2 
<div id="section2"> 

</div> 
<button onclick="backPage1();" type="button">< Back to Page 1</button> 
</div> 


<script> 
function toPage2() { 
    $('#page2').show(); 
    $('#page1').hide(); 
} 

function backPage1() { 
$('#page2').hide(); 
$('#page1').show(); 
} 
</script> 
</body> 
</html>

来源

2013-07-13 Joppo

为什么你不序列化你的选择器：P –

你试图绑定到文档准备好后，该事件已被解雇？ –

@评论Benjamin G：谢谢;我刚刚在显示的代码中用＃section1替换了#myForm，但那不起作用（除非你的意思与众不同？） – Joppo

根据您提交的代码

，你有一个语法错误

$("#formResponse").html("There was an error submitting  
    the form. Please try again.");

应该是在一行或打散这样的：

$("#formResponse").html("There was an error submitting" + 
" the form. Please try again.");

这可以防止您的提交事件回调绑定。 [编辑：由于JavaScript引擎无法运行包含的代码块]

因为它不是一个语法错误...如果您加载file2.html，其中包含您的形式，但其结合提交是你file1.html，你的表单不存在被绑定到。等到file2.html正在尝试使用jQuery('#myForm').submit要么在文件1定时等待或只包括file2.html

马特·惠普尔提醒我你阿贾克斯处理程序脚本标记加载之前......你也可以不喜欢它这个：

<script> 
$(document).ready(function(){ 
    $("#section1").load("file2.html", function(){ 
    $("#myForm").submit(function(){ 

     $.ajax({ 
      type: "POST", 
      url: "step2_submit2ajx.php", 
      data: $("#myForm").serialize(), 
      dataType: "json", 

      success: function(msg){ 
       $("#formResponse").removeClass('error'); 
       $("#formResponse").addClass(msg.statusgeneral); 
       $("#formResponse").html(msg.statusgeneral); 


      }, 
      error: function(){ 
       $("#formResponse").removeClass('success'); 
       $("#formResponse").addClass('error'); 
       $("#formResponse").html("There was an error submitting the form. Please try again."); 
      } 
     }); 

     //make sure the form doesn't post 
     return false; 

    }); //.ajax 
    }); //end anonymous success 
}); 
</script>

在这里你有你的提交回调绑定一旦表单成功加载到页面中。

来源

2013-07-13 19:11:40 EPB

thnx。但是，我只是在stackoverflow编辑器中提交代码时才会出现此语法错误。原线不破 – Joppo

啊，我明白了。我提出这个问题是因为它是我测试中唯一需要更改的代码才能运行。你有没有检查过你的错误控制台的任何异常？ – EPB

哦，虽然我的测试和实际设置之间可能存在差异，但我在包含'file2.html'中的表单的脚本标记中加入了我加载的脚本标记。我可以假设你在'file1中有脚本标记。html'和'file2.html'只包含表单？ – EPB

jquery .load不执行$ ajax函数

回答

相关问题