jQuery：tbody> trセレクタが.hover（）メソッドで動作しない

Question

私はKnockout.JSでほとんど管理しているxhtmlページを持っていますが、単純なDOM操作ではjQueryを使用しています。あなたがTBODY> TRの最後のTDが隠されて見るよう

<table style="font-size: small; margin-left: -1em; 
          border-right: transparent; border-bottom: transparent;" 
          id="appointmentsTable" class="table table-bordered table-hover"> 
         <thead> 
          <tr> 
           <th style="display: none;">id</th> 
           <th class="hand-on-hover" data-bind="click: sortByDate"> 
            #{bigcopy.tableDate} <i id="appDateCri"></i> 
           </th> 
           <th>#{bigcopy.tableTime}</th> 
           <th class="hand-on-hover" data-bind="click: sortByName"> 
            #{bigcopy.tableClient} <i id="appNameCri"></i> 
           </th> 
           <th class="hand-on-hover" data-bind="click: sortByType"> 
            #{bigcopy.tableType} <i id="appTypeCri"></i> 
           </th> 
           <th>#{bigcopy.tableMessage}</th> 
           <th>#{bigcopy.tableEmail}</th> 
          </tr> 
         </thead> 
         <tbody id="fbody" data-bind="foreach: appointments"> 
          <tr> 
           <td style="display: none;" data-bind="text:id"></td> 
           <td data-bind="text:date"></td> 
           <td data-bind="text:time"></td> 
           <td data-bind="text:clientName"></td> 
           <td data-bind="text:type"></td> 
           <td style="max-width: 15em;" data-bind="text:message"></td> 
           <td data-bind="text:email"></td> 
           <td style="border: transparent; display: none;"> 
            <span style="color:#d9534f;" class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
            <span style="color: #f0ad4e; margin-left: 0.75em;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 
           </td> 
          </tr> 
         </tbody> 
        </table> 

：

これは私が持っているテーブルです。それは、テーブルからのアポイントを編集/削除するためのボタンを保持します。行が推移したとき私の意図は、それを表示することです：

$("#appointmentsTable > tbody > tr").hover(    
      function() { 
       //mouseover 
       console.log("hovered"); 
       $(this).find("td:last").css("display", "block"); 
      }, function() { 
     //mouseout 
     $(this).find("td:last").css("display", "none"); 
    }); 

私は、セレクタはjQueryので認識されている場合、少なくともご覧にそこにconsole.log（）文を入力しました。残念ながらそうではありません。熱心赤にヘッダの背景を描画...

$(this).css("background-color", "red"); 

：

$("#appointmentsTable tr").hover 

とのハンドラ：ただしセレクタに変化します。

..私はその後、右クリックして選択しました： - >選択

どれヒントがするコピーをストリップオフすることが可能に質問に、これは私がセレクタを取得する方法ですそれは、ページの.xhtml拡張子と関係がありますが、私のための代替手段はありません。テーブルはRESTリソースから読み込まれ、更新されるため、ああ：dataTableは使用できません。

Answer 1

jQuery-KO-xhtmlとの互換性にバグがあるようです。私はxPathを含むたくさんのものを試してきました。カスタムのID（特定のパターンを持つ）を各trに設定しています。何も働かなかった。私はちょうど 'tbody'を撃つことができませんでした。

私は予定のクラスにこれを追加しました：：

：「TR」と「TD」要素に

sch.Appointment = function (id, date, time, type, clientName, email, message) { 
    ... 
    var self = this; 
    self.displayEdits = ko.observable(false); 
    self.toggleEdits = function() { 
     self.displayEdits(!self.displayEdits()); 
    }; 
}; 

及びこれらのバインディングエンド最後に、私はKnockout.JSを使用して簡単に意思決定を実装しました

<tbody data-bind="foreach: appointments"> 
          <tr data-bind="event: {mouseover: toggleEdits, mouseout: toggleEdits}"> 
           ... 
           <td data-bind="visible: displayEdits" style="border: transparent; display: none;"> 
            <span style="color:#d9534f;" class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
            <span style="color: #f0ad4e; margin-left: 0.75em;" class="glyphicon glyphicon-pencil" aria-hidden="true"></span> 
           </td> 
          </tr> 

誰にでも役立つことを願っています。