JQueryループの最後のレコードでCSSホバーが動作しない

Question

いくつかの結果を表示し、<div>の背景をホバー上で黄色に変更するために、次のコードを用意しました。最後のレコードを除くすべてのレコード（またはループ）で正常に動作します。何かヒント？

function tryit(){ 
    $(document).ready(function(){ 
    var url="api2.php"; 
    $.getJSON(url,function(json){ 
     $.each(json,function(i,dat){ 

     $(document).ready(function(){ 
      $(".products").hover(function(){ 
      $(this).css("background-color", "yellow"); 
      }, function(){ 
      $(this).css("background-color", "white"); 
      }); 
     }); 

     $("#data").append(
      '<div class="products">'+ 
      '<h1>Product: '+dat.product+'</h1>'+ 
      '<p>Seller : <em>'+dat.name+'</em>'+ 
      '<p>Email : <em>'+dat.email+'</em></p>'+ 
      ''+ 
      '<p>Phone: : <em>'+dat.phone+'</em></p>'+ 
      '<p>Category : <em>'+dat.category+'</em></p>'+ 
      '<p>Cost : <em>'+dat.cost+'</em></p>'+ 
      '<p>Description : <em>'+dat.description+'</em></p>'+ 
      '<p>Date : <em>'+dat.date+'</em>'+ 

      '<hr>'+ 
      '</div>' 


     ); 
     }); 
    }); 
    }); 
} 

Answer 1

あなたは「.hover（）」メソッド「）（.append」の後にあることを設定する必要があります

$("#data").append('...'); 

$(".products").hover(function(){ 
    $(this).css("background-color", "yellow"); 
}, function(){ 
    $(this).css("background-color", "white"); 
}); 

Answer 2

あなたが要素にhoverイベントをバインドしようとしたときので、コードは動作しません。 productsクラスでは、その後にappendを呼び出すと、これらの要素はDOMに存在しません。

hoverイベントをバインドするには、appendを呼び出した後、別の回答が示唆したとおりです。

代わりに、onイベントハンドラ関数を使用することもできます。これはjQueryのドキュメントです：http://api.jquery.com/on/on関数を使用すると、動的に追加された要素にイベントを添付できる委任イベントを使用できます。

委任イベントには、後でドキュメントに追加される子孫要素のイベントを処理できるという利点があります。デリゲートされたイベントハンドラがアタッチされた時点で存在することが保証されている要素を選択することにより、デリゲートされたイベントを使用して、イベントハンドラを頻繁にアタッチしたり削除したりする必要がなくなります。この要素は、たとえばModel-View-Controllerデザインのビューのコンテナ要素、またはドキュメント内のすべてのバブリングイベントをイベントハンドラが監視したい場合はドキュメントです。 document要素は、他のHTMLをロードする前にドキュメントの先頭に置くことができるので、ドキュメントを準備するのを待たずにそこにイベントを添付することは安全です。

いくつかのコード例：あなたはホバーイベントを複数回取り付けておく必要がありませんよう

$(document).on('hover', '.products', function() { 
    // do your thing 
}); 

on方法を使用して、あなたはループの外に移動することができます。あなたは要素を追加する前に.productsハンドラを追加しているDifference between .on('click') vs .click()

Answer 3

：onとclick方法の違いを議論する

Aスタックオーバーフローのスレッドも有用読み取りです。前のループで追加された要素はハンドラを使用します。最後に追加されたものはありません。

$(document).on("hover", ".products", function(){ 

へ

変更

$(".products").hover(function(){ 

また、あなたは、ループの外ハンドラのコードを取ることができます。