jQuery: tbody> tr Selektor funktioniert nicht für .hover() Methode

Question

Ich habe eine XHTML-Seite, die ich meist mit Knockout.JS verwalte, aber für die einfache DOM-Manipulationen verwende ich jQuery.

Dies ist die Tabelle, die ich habe:

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

Wie Sie die letzten td in der tbody> tr versteckt zu sehen ist. Es enthält Schaltflächen zum Bearbeiten/Löschen von Terminen aus der Tabelle. Meine Absicht ist es nur, es zu zeigen, wenn die Zeile schwebte ist:

$("#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"); 
    }); 

Ich habe die console.log() Aussage dort eingegeben zumindest sehen, ob die Wähler von jQuery erkannt wird. Leider ist das nicht der Fall. Doch die Änderung der Wahlschalter auf:

$("#appointmentsTable tr").hover 

und der Handler:

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

... fleißig malt den Hintergrund des Headers auf rot. Streifen-off mögliche Fragen, das ist ich, wie ich die Wähler erhalten:

..ich dann Rechtsklick auf und wählte: Copy ->Auswahl

Jeder Hinweis wird geschätzt werden.Es kann etwas mit der Erweiterung .xhtml der Seite zu tun haben, aber es gibt keine Alternative für mich - ich kann nicht ah: dataTable verwenden, weil die Tabelle von einer REST-Ressource gefüllt und aktualisiert wird.

Answer 1

Es scheint ein Fehler in der jQuery-KO-xhtml-Kompatibilität zu sein. Ich habe Tonnen von Sachen einschließlich xPath probiert, die kundenspezifischen ids (mit einem bestimmten Muster) zu jedem tr einstellend. Nichts hat geklappt. Ich konnte einfach nicht am 'tbody' vorbeischießen. Am Ende Ende implementiert ich eine einfache Entscheidung mit Knockout.JS:

Ich habe diese auf die Ernennung Klasse:

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()); 
    }; 
}; 

und diese Bindungen an die ‚tr‘ und ‚td‘ Elemente:

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

Ich hoffe, dass es für jeden hilfreich sein wird.