Селектор jquery не работает в document.ready с IE8 на td с пользовательским атрибутом (knockoutjs) - PullRequest
Новая
       4

Селектор jquery не работает в document.ready с IE8 на td с пользовательским атрибутом (knockoutjs)

0 голосов
/ 31 января 2012

Я не могу получить jquery для выбора элементов по идентификатору или классу, когда эти элементы имеют пользовательские атрибуты ... (в этом случае элементы являются тегами td с атрибутом "data-bind" - я использую knockoutJS)

Если я выберу по тегу, например $("table tr"), работает нормально. Это также работает, если я добавлю runat="server" к тегу таблицы, а затем изменим селектор на $("#<%=tblTimslips.ClientID%>"), но если я это сделаю, то нокаут больше не распознает таблицу.

Редактировать: я добавил еще один селектор (без комментариев в javascript ниже), который успешно захватывает TR в теге THEAD, но не в теге TBODY .... ??

Почему он не выбирается по идентификатору или классу? 

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

Вот как выглядит html #tblTimeslips после того, как с ним сделан нокаут. Я до сих пор не вижу проблемы. 

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

1 Ответ

3 голосов
/ 31 января 2012

Ваш css-селектор .highlight2 tr{} должен быть .highlight2{} (или tr.highlight2{}), иначе селектор не будет совпадать.Не имеет ничего общего с неисправным jquery;)

...