不能.ajax（）提交已使用jQuery .load（）加載到主頁的php表單
[英]Cant .ajax() submit a php form that has been loaded onto main page with jQuery .load()
問題描述
我遇到以下問題。 以下是有關我的PHP頁面及其工作方式的說明。 當我直接訪問form.php並嘗試通過AJAX提交它時，它運行完美。
問題 -當我將form.php加載到main.php中時，form.php中的jQuery代碼均未觸發。 （通過螢火蟲驗證）沒有屈服了，沒有警報，什么都沒有。 加載到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代碼，其ID為#homeprofile。
<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(),
});
});
});
4 個解決方案
解決方案1
3 已采納 2013-08-29 15:48:42
使用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;
});
解決方案2
1 2013-08-29 16:32:14
您應該使用.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
});
希望這會有所幫助！
解決方案3
0 2013-08-29 16:14:08
一個小問題是您在jquery調用中引用了formcontaineropen（這可能是拼寫錯誤？）。 原因是將解釋通過AJAX加載的JS代碼（因此不需要eval（）），但文檔就緒事件將立即觸發（可能在AJAX加載的內容實際插入文檔中並就緒之前）-因此Submit事件可能無法正確綁定）。 相反，您需要將代碼綁定到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>
解決方案4
0 2013-08-29 16:35:07
我的解決方案有些奇怪，但是無論如何都可以。
這將是您的main.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>
這是您的form.php：
<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>
用jQuery通過AJAX提交表單並顯示處理PHP頁面的返回
[英]Form submit through AJAX with jQuery and show the return of the processing PHP page
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.