Question

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 =按钮，但现在我什么也没得到。

工作流程为：

用户从选择列表中选择操作
jquery调用通过ajax将表单加载到div中，显示div，调用loadformjs
loadformjs取消绑定提交者ID，然后根据案例重新绑定将serviceme id提交给新的点击功能
用户填写表单，使用按钮提交并将表单提交给ajax进行处理，然后根据表单执行特定操作（如用户也登录成功注册）

那么，为什么加载到div中的表单没有绑定到submitme id并在点击时提交？

Answer 1

所以，问题是在div中加载表单。答案是改变ajax加载页面的方式。而不是

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

将表单放在第一个程序中，然后从ajax调用中加载表单id。

最终结果是

<div id=dispbox class=hideme>
<table border=3 width=100%>
 <tr><td>
 <form id=userform>
 </form>
 <tr><td colspan=2> <button type=button id=submitme>Submit</button>
 </td></tr></table>
 </div>

和ajax的代码是

function loadform(pdata) {
   $('#msg1').load(
     'makeform.php',
     pdata,
     function (responseText, textStatus, XMLHttpRequest) {
       var tstring = responseText.split('~$~');
       var thestatus = tstring[0];
       var theform = tstring[1];
       var thebutton = tstring[2];
       if (thestatus == 1) {
  // insert the form in the form div
         $('#userform').html(theform);
         $('#submitme').html(thebutton);
   // open the form div
         $('#dispbox').removeClass('hideme');
       } else {
         $('#dispbox').addClass('hideme');
       }
     }
   );
  }

现在，激活提交按钮的代码可以运行一个case语句，该语句只是根据表单设置要提交的相应ajax程序

使用此方法允许将所有表单加载到div中，表单的所有进程都可以通过单个按钮来完成，而不是单独处理每个表单输入我使用jquery.form.js来发送表单使用beforesubmit中的case语句来重置被调用的程序并在aftsubmit中进行后处理。

因此，基本规则是......您不能将div中的表单加载到页面中，然后对其处理jquery。这似乎是个问题。

在div中加载表单，按钮不会运行单击功能

1 个答案: