Question

我有一个功能使用网站（不是供公众使用，只是一个提供终结手段的网站），其中我有一个表，通过对我的数据库的AJAX调用每5秒填充/更新一次。 / p>

我想要发生的是，当我点击一个复选框（位于我的表格的一个单元格中）时，它会向该行添加一个类。除了它不喜欢数据来自AJAX的事实，我已经尝试过放入一个示例静态表，并且工作正常，但是与AJAX表相同的信息什么都不做。

我检查this link并且也没有回应我的行为，我在下面提供的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;
      });
    }
  });
});

有关更多示例，请参阅here

jQuery复选框表行突出显示不适用于AJAX

1 个答案: