【发布时间】：2014-10-20 05:40:10
【问题描述】：
jquery:
$(document).ready(function () {
$("#stusel").change(onSelectChangest);
$("#schoolsel").change(onSelectChangesc);
$("#coachsel").change(onSelectChangeco);
var selval = 0;
//
function onSelectChangest(){
var selected = $("#stusel option:selected");
// alert ('Student Selected ' + selected.val());
selval = selected.val();
var usertype = '1';
var pdata = {'usertype' : '1' , 'formtype': selected.val() };
loadform(pdata);
};
// form load function
function loadform(pdata) {
$('#msg1').load(
'makeform.php',
pdata,
function (responseText, textStatus, XMLHttpRequest) {
var tstring = responseText.split('~$~');
var thestatus = tstring[0];
var theform = tstring[1];
if (selval == 4) { // not coded for selection 4 yet
}
if (thestatus == 1) {
// insert the form in the form div
$('#display').html(theform);
// open the form div
$('#dispbox').removeClass('hideme');
// run the process to make the form live
loadformjs(selval);
} else {
$('#dispbox').addClass('hideme');
$('#display').html('');
}
}
);
}
//loadformjs
function loadformjs(form) {
$('#submitme').unbind('click');
switch (form) {
case '1': //login
$('#submitme').click(function(e) {
e.preventDefault();
var user = 'login_name='+ escape($('#uname').val());
var upass = '&login_pass='+ escape($('#upass').val());
var utype = '&user_type='+ usertype;
var pdata = user+upass+utype;
$.ajax({
type : "POST",
cache : false,
url : "login.php",
data : pdata,
success: function(data) {
var tstring = data.split('~');
sysmsg = tstring[1];
userdata = tstring[2];
jQuery.cookie( 'userdata', userdata );
}
});
});
break;
case '2': //register
alert ('loaded theform');
$('#submitme').click(function(e) {
alert('before ajax call');
e.preventDefault();
});
break;
}
} //snipped code here.... Theres more cases, etc.
现在的过程是用户从下拉菜单中选择一个动作，该动作导致一个表单被加载到一个 div 中，当表单被加载时，div 被显示，然后 loadformjs 被运行。它做的第一件事是取消绑定用于提交的按钮，然后它应该重新绑定按钮。
我收到表单已加载的警报。 我收到 loadqueryjs 正在运行的警报 但是当我使用该按钮时，似乎没有任何与点击相关的操作，因为点击的警报没有运行。
表格看起来像：
<center><h1>Registration</h1></center>
<form id=userform>
<input type=hidden id=usertype value=".$usertype." name=usertype>
<table border=0>
<tr><td colspan=2> <center><h3>Required by HSCETP</h3></center></td></tr>
<tr><td> Your School Code </td><td>
<input type=text id=scode1 name=scode1 size=10> -
<input type=text id=scode2 name=scode2 size=10> -
<input type=text id=scode3 name=scode3 size=10>
</td></tr>
<tr><td> Your e-mail (login) </td><td> <input type=text id=email name=email size=50></td></tr>
<tr><td> Repeat your e-mail (login) </td><td> <input type=text name=emailr size=50></td></tr>
<tr><td> Your Password </td><td> <input type=password id=password name=password size=50></td></tr>
<tr><td> Repeat your Password </td><td> <input type=password name=password1 size=50></td></tr>
".$reqgrade."
".$reqbook."
".$reqid."
<tr><td colspan=2> <center><h3>Optional</h3></center></td></tr>
".$optzip."
<tr><td> Your Name </td><td> <input type=text id=uname name=uname size=50></td></tr>
<tr><td colspan=2> <button type=button id=submitme>Submit</button>
</td></tr>
<tr><td colspan=2>
Each user account yadd yada yada - general text
</td></tr>
".$adminwarn."
</table>
</form>
现在是：
<button type=button id=submitme>Submit</button>
曾经
<button id=submitme>Submit</button>
但这导致表单提交，所以我添加了 type=button，但现在我什么也没得到。
工作流程是：
- 用户从选择列表中选择操作
- 被调用的jquery通过ajax获取表单将表单加载到div中，显示div，调用loadformjs
- loadformjs 解绑submitme id 然后根据情况重新绑定 将我的 id 提交给新的点击函数
- 用户完成表单，使用按钮提交并将表单提交到 ajax 进行处理，然后根据表单执行特定操作（如成功注册，用户也会登录）
那么，为什么已经加载到 div 中的表单没有绑定到 submitme id 并在点击时提交？
【问题讨论】：
-
您听说过委托活动吗？
-
ID
submitme在页面上是唯一的吗？ -
@EhsanSajjad 尽管委托事件更适合动态元素，但我不明白为什么 OP 代码不应该工作。
-
作为 OP 说内容正在通过 ajax 调用加载]
-
@EhsanSajjad
click事件处理程序正在绑定动态内容添加到页面，所以它应该可以工作。
标签： javascript jquery html ajax forms