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：

$(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的表单，并回显了包含更新信息的表单，然后发送回带有表单的页面。

这一切都很好，但是一旦我提交并且ajax更新了div，ajax调用就不再有效了。我知道这是因为表单类失去了绑定到jquery函数的问题，但我认为我选择的$(document).on('submit','.whatsdone',function()可以解决这个问题。它不是。谁能告诉我哪里出错了？

从ajax回复数据：

<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发布。您可以删除form和所有隐藏的input元素。我们将使用此

的data- *属性

<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
            }
      });
   });

希望这会有所帮助：）

ajax之后的jQuery绑定问题 - 使用$（document）.on（＆＃39; submit＆＃39;

1 个答案: