jQuery復選框表行突出顯示不適用於AJAX

Question

我有一個功能使用的網站（不供公眾使用，只是一個提供使用目的的網站），在該網站中，我有一個表，該表每5秒鍾通過對數據庫的AJAX調用進行填充/更新。

我想發生的是，當我單擊復選框（位於表的一個單元格中）時，它向該行添加了一個類。 除了它只是不喜歡數據來自AJAX的事實外，我嘗試將示例靜態表放入其中，並且效果很好，但是與AJAX表相同的信息什么也沒做。

我檢查了此鏈接 ，但也未響應我的操作，下面提供的JS代碼是我一直在靜態表上使用的JS代碼。

JS / AJAX

<script>
function getMessage(){
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function(){
       if(xmlhttp.readyState==4 && xmlhttp.status==200){
       var res = xmlhttp.responseText;
         $('#message tr:first').after(res);
       }
    }
    xmlhttp.open("GET","ajax/message.php",true);
    xmlhttp.send();
};
</script>

我一直在強調的JS代碼

$(document).ready(function() {
  $('#lectern_message tr')
    .filter(':has(:checkbox:checked)')
    .addClass('selected')
    .end()
  .click(function(event) {
    $(this).toggleClass('viewing');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).attr('checked', function() {
        return !this.checked;
      });
    }
  });
});

通過AJAX的示例表

<table id="message" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <th>Speaker</th>
      <th>Question</th>
      <th>Time</th>
      <th>View</th>
    </tr>
      <td class="name">Mr A</td>
      <td class="message">Hi</td>
      <td class="date">11:14:12</td>
      <td class="view"><input type="checkbox" value="no"></td>
    </tr>
    <tr>
      <td class="name">Mr B</td>
      <td class="message">Hello</td>
      <td class="date">10:32:36</td>
      <td class="view"><input type="checkbox" value="no"></td>
    </tr>
    <tr>
      <td class="name">Mr C</td>
      <td class="message">Question</td>
      <td class="date">10:32:18</td>
      <td class="view"><input type="checkbox" value="no"></td>
    </tr>
    <tr>
      <td class="name">Mr D</td>
      <td class="message">Hi</td>
      <td class="date">10:30:53</td>
      <td class="view"><input type="checkbox" value="no"></td>
    </tr>
  </tbody>
</table>

對不起，我想提供關鍵部分的代碼量很大，提到的message.php文件只是從我的數據庫中檢索所有記錄的調用，但是那部分工作正常。 如果有人可以幫我的忙，將非常感謝

Answer 1

click()將綁定到加載時全部存在的元素。 並注意，如果要對動態添加的元素使用click（），則必須使用jQuery的live（）或on（）方法...因此，必須將您的代碼更改為

$(document).ready(function() {
  $('#lectern_message tr')
    .filter(':has(:checkbox:checked)')
    .addClass('selected')
    .end()
  .live('click', function(event) {
    $(this).toggleClass('viewing');
    if (event.target.type !== 'checkbox') {
      $(':checkbox', this).attr('checked', function() {
        return !this.checked;
      });
    }
  });
});

有關更多示例，請參見此處