"Tabelle tr", "Tabelle tbody", funktioniert nicht auf Javascript funktioniert nur "Tabelle"

Question

Ich kann wirklich nicht sehen, warum mein Code nicht wie erwartet funktioniert. Ich möchte ein Bild anzeigen (von einem JSON, das ich zuvor geladen habe), wenn ich mit der Maus über jede Zeile meines Tisches gehe. Jedes Bild ist abhängig von der Zeile und ich möchte sie außerhalb der Tabelle in einem anderen Element anzeigen.

In diesem Moment habe ich die Tabelle mit dem Hover und ich kann ein Bild laden (ich verwende das gleiche Bild für alle Zeilen, nur um zu versuchen) aber betrifft das gesamte Element, einschließlich der Tabellenkopf . Ich möchte den Hover auf dem Kopf vermeiden, aber es funktioniert nur mit "tblList", und jedes Mal, wenn ich versuche, es in "tblList tr", "tblList tbody" oder ähnliches zu ändern, funktioniert es nicht. Bitte, wenn Sie irgendeine Lösung sehen, lassen Sie es mich wissen. Vielen Dank!

EDITED: Wenn ich den Hover kopiere und sie in meine Listenfunktion einfüge, funktioniert es am Ende mit: "tblList .tablarow". Kann immer noch nicht verstehen warum, wenn es draußen ist, funktioniert es nicht.

DER HTML:

<article class="table-responsive"> 
    <table class="table table-striped table-responsive" id="tblList"> 
    </table> 
    </article> 

Die JS:

$("#tblList").hover(function() { 
     var piso1 = JSON.parse(tbPisos[0]); 
     $('#displayDiv img').attr("src", piso1.Foto); 

    }, function(){ 
     $('#displayDiv img').attr("src", null); 
    }); 

die Listenfunktion:

function List(){ 
    $("#tblList").html(""); 
    $("#tblList").html(
     "<thead>"+ 
     "<tr>"+ 
     //"<th></th>"+ 
     "<th>Precio</th>"+ 
     "<th>Direccion</th>"+ 
     "<th>Ciudad</th>"+ 
     "<th>Fecha</th>"+ 
     "<th>Estado</th>"+ 
     "</tr>"+ 
     "</thead>"+ 
     "<tbody>"+ 
     "</tbody>" 
    ); 


    for(var i in tbPisos){ 
     var pisos= JSON.parse(tbPisos[i]); 
     $("#tblList tbody").append("<tr class ='table-row'>"+"td"+ 
      // "<td>"+pisos.ID+"</td>" + 
      "<td>"+pisos.Precio+ " €"+"</td>" + 
      "<td>"+pisos.Direccion+"</td>" + 
      "<td>"+pisos.Ciudad+"</td>" + 
      "<td>"+pisos.Anyo+"</td>" + 
      "<td>"+pisos.Estado+"</td>" + 
      +"</tr>"); 
    } 
} 

Answer 1

Es scheint, dass Sie in der Lage sind Hover-Ereignis auf die Eltern führen, aber nicht auf es ist Kinder.

Verwenden Sie on(), um ein Ereignis an dynamisch angehängten Elementen zu binden.

Und Child Selector (“parent > child”) um ein Ereignis auf Kind unter einem bestimmten Elternteil durchzuführen.

$('body').on('hover', "#tblList > tbody", (function() { 
     var piso1 = JSON.parse(tbPisos[0]); 
     $('#displayDiv img').attr("src", piso1.Foto); 
    }, function(){ 
     $('#displayDiv img').attr("src", null); 
    } 
}); 

ODER

$('#tblList').on('hover', 'tbody', (function() { 
      var piso1 = JSON.parse(tbPisos[0]); 
      $('#displayDiv img').attr("src", piso1.Foto); 
     }, function(){ 
      $('#displayDiv img').attr("src", null); 
     } 
}); 

Und stellen Sie sicher, dass Sie Wert von var piso1 = JSON.parse(tbPisos[0]); in Ihrer Hover-Funktion sind immer und Ihre Konsole überprüfen, ob es irgendwelche Fehler gibt.

Hoffe das hilft dir.