我准备好了jQuery文档中的以下代码;
jQuery("#frmUpdateDet").submit(function (e) {
jQuery.ajax({
type: 'POST',
url: './php/updateCred.php',
data: jQuery(this).serialize(),
async: false,
success: function (data) {
jQuery("#msg").empty();
jQuery("#msg").append("<p>" + data + "</p>");
jQuery("#msg").show().delay(800).fadeOut();
}
});
e.preventDefault();
});
jQuery("#frmUpdatePass").submit(function (e) {
jQuery.ajax({
type: 'POST',
url: './php/updateCred.php',
data: jQuery(this).serialize(),
async: false,
success: function (data) {
jQuery("#msg").empty();
jQuery("#msg").append("<p>" + data + "</p>");
jQuery("#msg").show().delay(800).fadeOut();
}
});
e.preventDefault();
});
然而，当我提交＆＃34; frmUpdateDet＆＃34;表单，它没有重定向到我的PHP脚本但是当我提交我的＆＃34; frmUpdatePass＆＃34;形成它重定向到我的PHP脚本......这怎么可能？我的函数只是前一个函数的复制品......
编辑 - 我的两个HTML表单都是通过JavaScript添加的，其中一个表单如下所示 - 重新编辑...我的功能
function accountSettingMenuClick($id){
// 1 = details
// 2 = security
// 3 = cloud settings
jQuery("#AD").css("text-decoration", "none");
jQuery("#AS").css("text-decoration", "none");
jQuery("#ACS").css("text-decoration", "none");
var cred;
jQuery.ajax({
type: 'POST',
async: false,
url: './php/retrieve/getCred.php',
success: function (data) {
if (data != "null") {
cred = JSON.parse(data);
}
}
});
if($id == 1) {
jQuery("#AD").css("text-decoration", "underline");
var adHTML;
if(cred == "null") {
adHTML = "<p>Error! Contact Administrator</p>";
} else {
adHTML = "<form id='frmUpdateDet' action='./php/updateCred.php' method='POST'><table class='table'>" +
"<tr> <td>Name: </td> <td><input class='mainInput' name='name' type='text' value='" + cred['credentials']['name'] + "' placeholder='" + cred['credentials']['name'] + "'/></td> </tr>" +
"<tr> <td>Surname: </td> <td><input class='mainInput' name='surname' type='text' value='" + cred['credentials']['surname'] + "' placeholder='" + cred['credentials']['surname'] + "' /></td> </tr>" +
"</table> <table class='table'><tr><td><input type='submit' value='Update' class='mainBtn'/></td></tr></table> </form>";
}
jQuery("#content").append(adHTML);
} else if ($id == 2) {
jQuery("#AS").css("text-decoration", "underline");
var asHTML;
if(cred == "null") {
asHTML = "<p>Error! Contact Administrator</p>";
} else {
asHTML = "<form id='frmUpdatePass' action='./php/updateCred.php' method='POST'><table class='table'>" +
"<tr> <td>Old Password: </td> <td><input class='mainInput' name='oldPass' type='password' placeholder='Current Password' required/></td> </tr>" +
"<tr> <td>New Password: </td> <td><input class='mainInput' name='newPass' type='password' placeholder='New Password' required onchange='form.rPass.pattern = this.value;'/></td> </tr>" +
"<tr> <td>Re-type New Password: </td> <td><input class='mainInput' id='rPass' type='password' placeholder='Re-type New Password' /></td> </tr>" +
"</table> <table class='table'><tr><td><input type='submit' value='Update' class='mainBtn'/></td></tr></table> </form>";
}
jQuery("#content").append(asHTML);
} else if ($id == 3) {
jQuery("#ACS").css("text-decoration", "underline");
var acsHTML;
if(cred == "null") {
acsHTML = "<p>Error! Contact Administrator</p>";
} else {
var show;
var limit = cred['credentials']['limit'];
if (limit > 5000) {
show = limit/1024;
show = show.toFixed(2);
show = show + " GB";
} else {
show = limit;
show = show + " MB";
}
acsHTML = "<form id='frmUpdateUpg'><table class='table'>" +
"<tr> <td>Current Limit: </td> <td><input type='text' class='mainInput' style='border: none; border-bottom: 1px dashed black; width: 100px; text-align: center;' disabled value='" + show +"'></td> </tr>" +
"</table> <table class='table'><tr><td><input type='submit' class='mainBtn' value='Upgrade'/></td></tr></table> </form>";
}
jQuery("#content").append(acsHTML);
}
}
和我的角度控制器 -
function AppSettingsCtrl($scope){
if (checkSession() == false){
location = "#/";
} else {
validateUI();
}
accountSettingMenuClick(1);
jQuery(document).ready(function (jQuery) {
jQuery("#AD").click(function () {
jQuery("#content").empty();
accountSettingMenuClick(1);
});
jQuery("#AS").click(function () {
jQuery("#content").empty();
accountSettingMenuClick(2);
});
jQuery("#ACS").click(function () {
jQuery("#content").empty();
accountSettingMenuClick(3);
});
jQuery("#frmUpdateDet").submit(function (e) {
jQuery.ajax({
type: 'POST',
url: './php/updateCred.php',
data: jQuery(this).serialize(),
async: false,
success: function (data) {
jQuery("#msg").empty();
jQuery("#msg").append("<p>" + data + "</p>");
jQuery("#msg").show().delay(800).fadeOut();
}
});
e.preventDefault();
});
jQuery("#frmUpdatePass").submit(function (e) {
jQuery.ajax({
type: 'POST',
url: './php/updateCred.php',
data: jQuery(this).serialize(),
async: false,
success: function (data) {
jQuery("#msg").empty();
jQuery("#msg").append("<p>" + data + "</p>");
jQuery("#msg").show().delay(800).fadeOut();
}
});
e.preventDefault();
});
});
}
答案 0 :(得分：1)
你提到你的元素是动态添加的。这通常意味着您需要使用委托的事件处理程序：
jQuery(document).on("submit", "#frmUpdatePass", function (e) {
委托事件在祖先监听，然后应用选择器，然后将该函数应用于生成事件的任何匹配元素。在添加处理程序时，元素不需要存在。
*注意：如上所述，您确实需要使用模板而不是HTML字符串，或者至少切换到单引号，以便HTML属性按预期双引号这将是真实的当你想要SO的帮助时，你会遇到问题。
这是一个在模板中使用HTML字符串的示例，并使用委托的事件处理程序：
要追加模板的代码可以根据需要替换模板中的任何占位符字符串：
e.g。
$('body').append($('#frmUpdateDettmp').html().replace("{surname}", surname).replace("{credentials}", credentials));
虽然对于多个匹配，您需要在其中使用带有/ g（全局）的RegEx表达式。