2012-01-31 11 views
0

idまたはclassで要素を選択するjqueryを取得できません。これらの要素にカスタム属性がある場合、要素は属性 "data-bind"を持つtdタグです - knockoutJSを使用しています)jqueryセレクタがdocument.readyでIE8をカスタム属性(knockoutjs)で使用していません

タグで選択すると$("table tr")、それは正常に動作します。テーブルタグにrunat="server"を追加してセレクタを$("#<%=tblTimslips.ClientID%>")に変更しても機能しますが、これを行うとノックアウトでテーブルが認識されなくなります。

編集:別のセレクタ(下のjavascriptの非コメントの1つ)を追加しました.TBODYタグのTRではなく、THEADタグのTRを正常に取得します。

IDまたはクラスで選択しないのはなぜですか?

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

ノックアウトが完了した後の#tblTimeslips htmlの外観は次のとおりです。私はまだ問題を見ることができません。

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

セレクタがJSとCSSで一致していることを確認してください。 '.timeslipsGrid tr.highlight2'は' .highlight2tr'と同じものではありません。 – Jasper

答えて

3

あなたのCSSセレクタ.highlight2 tr{}は、そうでなければ、セレクタが一致しない、.highlight2{}(又はtr.highlight2{})であるべきです。 )不一致のjqueryとは関係ありません;)

+0

いずれにせよ問題ではないようです。とにかく、私はそれを.highlight2 {}に変更しましたが、それは助けになりません。 $( "#tblTimeslips tr")を使用すると、theadのtrは正常にハイライト表示されますが、tbodyのTRは正常に表示されません。また、私はそれが間違ったjqueryだとは思わない...私の研究によると、それはIE8がTDのカスタムデータバインド属性を認識しない方法と関係があると思われる? – pabrams

+0

まあ、ノックアウトの問題だと思いますか? Jqueryはカスタム属性に問題はありません(通常のブラウザでは^。^)。 – Christoph

+0

おそらく、クラスによって直接tdsを選択すると役立つでしょうか? – Christoph

関連する問題