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

Question

我有一個功能性的使用網站（不是供公衆使用，只是一個網站，提供了一種手段結束），我有一個表正在填充/更新每5秒鐘通過AJAX調用我的數據庫。

我想要發生的是，當我點擊一個複選框（這是我的表格中的一個單元格）時，它會向該行添加一個類。除了它只是不喜歡數據來自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代碼我已經使用通過AJAX

突出

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

示例表

<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()將被綁定到所有存在的時候加載的元素。並且注意，如果你想使用點擊（）用於動態添加的元素，你必須去活（）或（）的jQuery的方法......所以你要我們的代碼更改爲

$(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