0

我有一个功能使用网站（不供公众使用，只是一个提供达到目的的方法的网站），其中我有一个表，通过对我的数据库的 AJAX 调用每 5 秒填充/更新一次。

我想要发生的是，当我单击一个复选框（位于我表的一个单元格中）时，它会向该行添加一个类。除了它只是不喜欢数据来自 AJAX 的事实，我尝试在其中放入一个示例静态表，并且效果很好，但是与 AJAX 表相同的信息什么也没做。

我检查了这个链接，它也没有响应我的操作，我在下面提供的 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 文件只是从我的数据库中检索所有记录的调用，但这部分工作正常。如果有人可以帮我一把，这将是一个巨大的帮助，非常感谢

4

1 回答 1

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

有关更多示例，请参见此处

于 2012-11-27T12:47:31.383 回答