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函數

回答

相關問題