我正在使用这个Jquery:
$('#resultstable').on('click', 'tbody tr', function() {
alert("helloworld")
$('#resultstable tr.Selected').removeClass('Selected');
$(this).addClass('Selected');
});
它应该在点击时将类Selected添加到TR中。它还应该删除所选类的任何其他实例。(一次只能选择一个TR)
它正在这张桌子上工作:
<table id="resultstable">
<tr id="resultsheading">
<th OnClick="OrderBy(0)">Module<br /> Code</th>
<th OnClick="OrderBy(1)">RoomID</th>
<th OnClick="OrderBy(2)">Students</th>
<th OnClick="OrderBy(3)">Priority</th>
<th OnClick="OrderBy(4)">Weeks</th>
<th OnClick="OrderBy(5)">Day</th>
<th>Start Time</th>
<th>Length</th>
<th>End Time</th>
<th OnClick="OrderBy(6)">Date Added</th>
</tr>
<tbody>
<tr id= "192" >
<td>11COA121</td>
<td>CC012</td>
<td>340</td>
<td>Yes</td>
<td>All</td>
<td>0</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>0000-00-00 00:00:00</td>
</tr>
</tbody>
</table>
我还应该提到的是,该表是动态的,当用户单击编辑或删除等按钮时,它将删除该行,然后使用此项重新加载该表(例如删除一行):
function DeleteRequest(ReqID)
{
//Ajax call for deleterequest
$.post("a/outputresults2.php", {DelRequest: ReqID} , function(data)
{
$('#resultstable').html(data);
});
}
目前,它没有做任何事情,甚至没有贯穿始终,也没有发出警报。问题出在哪里?
需要注意的是,JS控制台上没有出现任何错误。
谢谢!
我认为问题出在这条线上
$('#resultstable').on('click', 'tbody tr', function() {
如果我正确理解这一点,那么您放置的选择器将把事件处理程序附加到当前表中的tbody和tr元素,因此当您添加新的tr元素时,不会为新行触发事件处理程序。
你可以试试之类的东西
$('#resultstable').on('click', function(event) {
if ($(event.target).is('tr') || $(event.target).is('tbody')) {
// ... do logic in here
}
});
基本上是根据event.target属性将目标过滤为tr或tbody。
选择使用此代码。
Se jsfiddle:http://jsfiddle.net/bouillard/fUntG/
我怀疑您可能需要更改:
$('#resultstable').on('click', 'tbody tr', function() {
至:
$('#resultstable').live('click', 'tbody tr', function() {
因此它继续使用动态加载的数据。