Question

I have a functional use website (not for public use, just a website that provides a means to an end) in which I have a table that is being populated/updated every 5 seconds through an AJAX call to my database.

What I want to happen is that when I click on a checkbox (which is in one of the cells of my table), it adds a class to that row. except it just does not like the fact the data is coming from AJAX, I have tried putting a sample static table in, and that works fine, but the same information as an AJAX table just does nothing.

I checked this link and that didn’t respond to my actions either, the JS code I have provided below is the one I have been using which worked on the static table

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 Code I have been using to highlight

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

Example Table through 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>

Sorry for the massive amounts of code, thought I would provide the key parts, the message.php file that is mentioned is just a call to retrieve all the records from my database, but that part of it works fine. If anyone can give me a hand that would be a massive help, many thanks

Answer 1

click() will be bind to the elements which are all present when the time of loading. and note that if you want to use click() for dynamically added elements, you have to go for live() or on() method of jQuery… so you have to change ur code to

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

for more examples pls see here