jquery selector not working in document.ready with IE8 on td with custom attribute (knockoutjs)

Question

I can't get jquery to select elements by id or class when those elements have custom attributes on them... (in this case, the elements are td tags with attribute "data-bind" - am using knockoutJS)

If I select by tag, e.g. $("table tr") , it works fine. It also works if I add runat="server" to the table tag, and then change the selector to $("#<%=tblTimslips.ClientID%>"), but if I do that, then knockout doesn't recognize the table anymore.

Edit: I added another selector (the uncommented one in the javascript below), which succesfully grabs the TRs in the THEAD tag, but not the ones in the TBODY tag.... ??

Why won't it select by ID or class?

<style type="text/css">
    .highlight2
    {
        background-color: #0000ee;
    }
</style>
<script type="text/javascript"> 

    $(document).ready(function () {
        loadClient();
        //$(".TimeslipsGrid tr").hover(function () { 
        // above selector by class doesn't work, nor does the following by id:
        // $("#tblTimeslips").hover(function(){     
        //  however, the following selector WILL work on all tr on the page, including my targets in #tblTimeslip:
        // $("table tr").hover(function(){
        // the following selector works, but ONLY FOR THE TR CONTAINED IN THEAD..
        //  changing it to "#tblTimeslips tbody tr" doesn't help, either..
        $("#tblTimeslips tr").hover(function() {
            $(this).addClass("highlight2");
        }, function () {
            $(this).removeClass("highlight2");
        })
</script>

<table id="tblTimeslips" class="TimeslipsGrid">
    <thead>
    <tr>
        <th>Time</th><th>Dur</th><th>File</th><th>Task/Activity</th><th>Note</th>
    </tr>
    </thead>
    <tbody data-bind="foreach: timeslips">
    <tr>
        <td data-bind="text: TimeString"></td>
        <td data-bind="text: DurationString"></td>
        <td data-bind="text: FileNumber"></td>
        <td data-bind="text: TaskActivityAbbrText"></td>
        <td><img data-bind="attr: { src: NoteIconPath }" /></td>
    </tr>
    </tbody>
</table>

Here's what the #tblTimeslips html looks like after knockout is done with it. I still can't see the problem.

<table class="TimeslipsGrid" id="tblTimeslips">
<THEAD>
<TR jQuery17108028844206682706="72">
<TH>Time</TH>
<TH>Dur</TH>
<TH>File</TH>
<TH>Task/Activity</TH>
<TH>Note</TH></TR></THEAD>
<TBODY data-bind="foreach: timeslips" __ko__1328033964035="ko1">
<TR jQuery17108028844206682706="73" __ko__1328033964035="ko2">
<TD data-bind="text: TimeString" __ko__1328033964035="ko3">00:00<BR>06:23 AM</TD>
<TD data-bind="text: DurationString" __ko__1328033964035="ko4">6.38</TD>
<TD data-bind="text: FileNumber" __ko__1328033964035="ko5">9-12632-555</TD>
<TD data-bind="text: TaskActivityAbbrText" __ko__1328033964035="ko6">Admin | Agnt Suprvsn</TD>
<TD><IMG src="../Images/Homepage/note_full_16.png" data-bind="attr: { src: NoteIconPath }" __ko__1328033964035="ko7"></TD></TR>
<TR jQuery17108028844206682706="73" __ko__1328033964035="ko8">
<TD data-bind="text: TimeString" __ko__1328033964035="ko9">06:23<BR>06:28 AM</TD>
<TD data-bind="text: DurationString" __ko__1328033964035="ko10">0.08</TD>
<TD data-bind="text: FileNumber" __ko__1328033964035="ko11">9-12601-7</TD>
<TD data-bind="text: TaskActivityAbbrText" __ko__1328033964035="ko12">Admin | PTOW</TD>
<TD><IMG src="../Images/Homepage/note_full_16.png" data-bind="attr: { src: NoteIconPath }" __ko__1328033964035="ko13"></TD></TR>
<TR jQuery17108028844206682706="73" __ko__1328033964035="ko14">
<TD data-bind="text: TimeString" __ko__1328033964035="ko15">06:28<BR>08:28 AM</TD>
<TD data-bind="text: DurationString" __ko__1328033964035="ko16">2</TD>
<TD data-bind="text: FileNumber" __ko__1328033964035="ko17">(no timeslip)</TD>
<TD data-bind="text: TaskActivityAbbrText" __ko__1328033964035="ko18">(none)</TD>
<TD><IMG src="../Images/Homepage/note_empty_16.png" data-bind="attr: { src: NoteIconPath }" __ko__1328033964035="ko19"></TD></TR>
<TR jQuery17108028844206682706="73" __ko__1328033964035="ko20">
<TD data-bind="text: TimeString" __ko__1328033964035="ko21">08:28<BR>09:28 AM</TD>
<TD data-bind="text: DurationString" __ko__1328033964035="ko22">1</TD>
<TD data-bind="text: FileNumber" __ko__1328033964035="ko23">9-12632-553</TD>
<TD data-bind="text: TaskActivityAbbrText" __ko__1328033964035="ko24">T-A | KM</TD>
<TD><IMG src="../Images/Homepage/note_full_16.png" data-bind="attr: { src: NoteIconPath }" __ko__1328033964035="ko25"></TD></TR>
<TR jQuery17108028844206682706="73" __ko__1328033964035="ko26">
<TD data-bind="text: TimeString" __ko__1328033964035="ko27">09:28<BR>11:01 AM</TD>
<TD data-bind="text: DurationString" __ko__1328033964035="ko28">1.55</TD>
<TD data-bind="text: FileNumber" __ko__1328033964035="ko29">(no timeslip)</TD>
<TD data-bind="text: TaskActivityAbbrText" __ko__1328033964035="ko30">(none)</TD>
<TD><IMG src="../Images/Homepage/note_empty_16.png" data-bind="attr: { src: NoteIconPath }" __ko__1328033964035="ko31"></TD></TR>
<TR jQuery17108028844206682706="73" __ko__1328033964035="ko32">
<TD data-bind="text: TimeString" __ko__1328033964035="ko33">11:01<BR>10:00 PM</TD>
<TD data-bind="text: DurationString" __ko__1328033964035="ko34">10.98</TD>
<TD data-bind="text: FileNumber" __ko__1328033964035="ko35">2-9999-1</TD>
<TD data-bind="text: TaskActivityAbbrText" __ko__1328033964035="ko36">ATL | Doc Conv &amp;DE</TD>
<TD><IMG src="../Images/Homepage/note_full_16.png" data-bind="attr: { src: NoteIconPath }" __ko__1328033964035="ko37"></TD></TR></TBODY>
</table>

Answer 1

Your css-selector .highlight2 tr{} should be .highlight2{} (or tr.highlight2{}) , otherwise the selector won't match. Has nothing to do with faulty jquery;)