"テーブルtr"、 "テーブルtbody"、JavaScriptで動作しない "テーブル"

Question

実際に私のコードが期待どおりに動作しない理由がわかりません。テーブルの各行にマウスを重ねると、以前にロードしたJSONの画像を表示したいと思います。各イメージは行によって異なり、別の要素の表の外側に表示したいと考えています。

この時点で私はホバーを持つテーブルを持っています。（私はすべての行に同じ画像を使用しています）しかし、それはテーブルヘッドを含む要素全体に影響します。私は頭の上にホバリングを避けたいが、それは "tblList"でのみ動作し、 "tblList tr"、 "tblList tbody"またはそれに類するものに変更しようとするたびに動作しない。あなたが解決策を見たら私に教えてください。ありがとう！

EDITED：ホバーをコピーしてリスト機能に貼り付けると、最後に「tblList .tablerow」が使用されます。なぜそれが外にあれば、なぜ動作しないのか理解できません。

HTML：

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

JS：

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

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

リスト機能：

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

あなたは親ではなく、上のホバーイベントを行うことができるしているようですそれは子供たちです。

動的に追加される要素にイベントをバインドするには、on()を使用します。

およびChild Selector (“parent > child”)特定の親の下の子にイベントを実行する。

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

OR

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

そして、あなたはあなたのホバー機能に var piso1 = JSON.parse(tbPisos[0]);の値を取得していることを確認して、それはすべてのエラーを与えた場合、あなたのコンソールを確認してください。

希望すると、これが役に立ちます。