ajax之後的jQuery綁定問題 - 使用$（document）.on（'submit'

Question

我有一個問題，jQuery在ajax更新後失去了與類綁定的問題，我以前做過這件事，並且找不到我的問題在哪裏，所以即時通訊尋求幫助

我有一個表格：

<div id="confirmed_tile"> 
<form id="form_id" name="form_name" class='whatsdone'> 
</table> 
    <tr> 
     <td> 
     Name 
     </td> 
     <td> 
     Name 
     </td> 
     <td> 
     Name 
     </td> 
    </tr> 
</table> 
<input type="submit" id="press_submit"> 
</form> 
</div> 

然後，我有一些jQuery的處理表單submittion：

$(document).on('submit','.whatsdone',function(){ 
    var url = "ajax/update_appointment_clinic.php"; 
     $.ajax({ 
       type: "POST", 
       url: url, 
       data: $(this).serialize(), 
       success: function(data) 
       { 
        $("div#confirmed_tile").html(data); 
       } 
      }); 
     return false; 
}); 

這Ajax調用都提交表單更新mysql和echo回到帶有更新信息的表單，併發送回帶有表單的頁面。

這一切都很好，但一旦我提交和ajax更新div，ajax調用不再起作用。我知道這是因爲表單類失去綁定到jquery函數的問題，但我認爲我選擇$(document).on('submit','.whatsdone',function()可以解決這個問題。它不是。誰能告訴我我錯了哪裏？

性反應的數據從阿賈克斯回：

<table width='100%' border='0' id='large' cellspacing='0' class='tablesorter table'> 
<thead> 
<tr> 
<th rowspan='3'><p>Time</p></th> 
<th rowspan='1'><p>First</p></th> 
<th rowspan='1'><p>Last</p></th> 
<th rowspan='2'><p>Pet Name</p></th> 
<th rowspan='4'><p>APT</p></th> 
<th rowspan='4'><p>Species</p></th> 
<th rowspan='4'><p>Phone #</p></th> 
<th rowspan='4'><p>Status</p></th> 
<th rowspan='4'>&nbsp;</th> 
<th rowspan='4'>&nbsp;</th> 
<th rowspan='4'>&nbsp;</th> 
</tr> 
</thead> 
<tbody>         


<tr> 
<td><p>2:00 pm</p></td> 
<td><p>B</p></td> 
<td><p>Bozley</p></td> 
<td><p>Holly</p></td> 
<td><p>(233)</p></td> 
<td><p>Canine</p></td> 
<td><p>555-555-5555</p></td> 
<form name='6' method='post' class='whatsdone'> 
<input type='hidden' name='app_id' value='6'> 
<input type='hidden' name='clinic_id' value='20'> 
<input type='hidden' name='appointment_date' value='2015-02-05'> 
<input type='hidden' name='first_visit_apt' value='233'> 
<td style='max-width:100px'><p> 
    <select name='confirm_value'> 
    <option value='1'><p>Confirmed</p></option> 
    <option value=5>Left Voicemail</option> 
    <option value=4>Left Message w/ Person</option> 
    <option value=3>Rescheduled</option> 
    <option value=1>Confirmed</option> 
    <option value=0>Unconfirmed</option> 
    <option value=2>Cancelled</option> 
    <option value=6>Could Not Reach</option> 
    </select></p> 
</td> 
<td style='max-width:30px'> 
<input type='submit' data-form='6' class='update_confirmed_button' value='GO'> 
</td> 
</form> 
<td style='max-width:30px'><p>11:11 pm</p></td> 
<td style='max-width:30px'> 
<div class='color_5' title='Participant with responce'> 
<div style='display:none'>5</div> 
</div> 
</td> 
</tr> 
</tbody> 
</table> 

謝謝 傑森

Answer 1

正如我在評論中提到的，問題是用HTML不當，因爲它的form是不包括任何input元素關閉。我編輯的結構如下圖所示，它的工作原理:)這裏的bin驗證

<form name='6' method='post' class='whatsdone'> 
<input type='hidden' name='app_id' value='6'> 
<input type='hidden' name='clinic_id' value='20'> 
<input type='hidden' name='appointment_date' value='2015-02-05'> 
<input type='hidden' name='first_visit_apt' value='233'> 


<table width='100%' border='0' id='large' cellspacing='0' class='tablesorter table'> 
<thead> 
<tr> 
    <th rowspan='3'><p>Time</p></th> 
    <th rowspan='1'><p>First</p></th> 
    <th rowspan='1'><p>Last</p></th> 
    <th rowspan='2'><p>Pet Name</p></th> 
    <th rowspan='4'><p>APT</p></th> 
    <th rowspan='4'><p>Species</p></th> 
    <th rowspan='4'><p>Phone #</p></th> 
    <th rowspan='4'><p>Status</p></th> 
    <th rowspan='4'>&nbsp;</th> 
    <th rowspan='4'>&nbsp;</th> 
    <th rowspan='4'>&nbsp;</th> 
</tr> 
</thead> 
<tbody>         
<tr> 
    <td><p>2:00 pm</p></td> 
    <td><p>B</p></td> 
    <td><p>Bozley</p></td> 
    <td><p>Holly</p></td> 
    <td><p>(233)</p></td> 
    <td><p>Canine</p></td> 
    <td><p>555-555-5555</p></td> 
    <td style='max-width:100px'> 
    <select name='confirm_value'> 
     <option value='1'><p>Confirmed</p></option> 
     <option value=5>Left Voicemail</option> 
     <option value=4>Left Message w/ Person</option> 
     <option value=3>Rescheduled</option> 
     <option value=1>Confirmed</option> 
     <option value=0>Unconfirmed</option> 
     <option value=2>Cancelled</option> 
     <option value=6>Could Not Reach</option> 
    </select> 
</td> 
<td style='max-width:30px'> 
    <input type='submit' data-form='6' class='update_confirmed_button' value='GO'> 
</td> 

    <td style='max-width:30px'><p>11:11 pm</p></td> 
    <td style='max-width:30px'> 
    <div class='color_5' title='Participant with responce'> 
     <div style='display:none'>5</div> 
    </div> 
    </td> 
</tr> 
</tbody> 
</table> 

</form> 

編輯：多個用戶的捕獲值，做一個Ajax後該用戶alone.You可以刪除form和所有隱藏input元素。我們將利用數據 - *此

<input type='submit' 
     data-user='{ 
      "app_id" : "6", 
      "clinic_id" : "20", 
      "appointment_date" : "2015-02-05", 
      "first_visit_apt" : "233" 
     }' 
     data-form='6' 
     class='update_confirmed_button postBtn' value='GO'> 

屬性只需註冊一個處理器是火Ajax調用

$(document).on('click','.postBtn',function(e){ 
     var postData = $(e.target).data('user'); 
     // append if any params 
     $.ajax({ 
      url : 'ajax/update_appointment_clinic.php', 
      data : postData, 
      type : 'POST', 
      success : function(data){ 
       // deal with ajax response 
      } 
     }); 
    }); 

希望這有助於:)