Javascript CSS悬停在JQuery循环的最后一条记录中不起作用

我有下面的代码只是为了显示一些结果，并在悬停时将

的背景更改为黄色。除最后一条记录外，它在所有记录（或循环）上都可以正常工作。有什么提示吗

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


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

函数tryit（）{
$（文档）.ready（函数（）{
var url=“api2.php”；
$.getJSON（url，函数（json）{
$.each（json、函数（i、dat）{
$（文档）.ready（函数（）{
$（“.products”）.hover（函数（）{
$（this.css（“背景色”、“黄色”）；
}，函数（）{
$（this.css（“背景色”、“白色”）；
});
}); 
$（“#数据”）。追加(
''+
'产品：'+dat.Product+''+
卖方：“+dat.name+”+
“电子邮件：”+dat.Email+“
”+
''+
“电话：：”+dat.Phone+“
”+
“类别：”+dat.Category+“
”+
“成本：”+dat.Cost+“
”+
“说明：”+dat.Description+“
”+
“日期：”+dat.Date+”+
“
”+
''
);
});
});
});
}

您应该将“.hover（）”设置在“.append（）”方法之后

您应该将“.hover（）”设置在“.append（）”方法之后

---

代码不起作用，因为当您尝试将

悬停

事件绑定到带有

产品

类的元素时，这些元素在DOM中还不存在，因为您在此之后调用了

追加

另一个答案建议您可以在调用

append

后绑定

hover

事件

另一种方法是使用

on

事件处理程序函数。以下是来自jQuery的文档：。通过启用功能，您可以使用委派事件，这将允许您在动态添加的元素上附加事件

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择在附加委派事件处理程序时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，如果事件处理程序希望监视文档中的所有冒泡事件，则可以是文档。文档元素在加载任何其他HTML之前都在文档的头部可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪

一些示例代码：

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

使用

on

方法时，可以将其移出循环，因为不需要多次附加悬停事件

---

堆栈溢出线程讨论了上的

和

单击方法之间的差异，这也是一个有用的阅读：

代码不起作用，因为当您尝试将

悬停

事件绑定到带有

产品

类的元素时，这些元素在DOM中还不存在，因为在此之后您调用了

append

另一个答案建议您可以在调用

append

后绑定

hover

事件

另一种方法是使用

on

事件处理程序函数。以下是来自jQuery的文档：。通过启用功能，您可以使用委派事件，这将允许您在动态添加的元素上附加事件

委派事件的优点是，它们可以处理来自子元素的事件，这些子元素将在以后添加到文档中。通过选择在附加委派事件处理程序时保证存在的元素，可以使用委派事件来避免频繁附加和删除事件处理程序。例如，该元素可以是模型-视图-控制器设计中视图的容器元素，如果事件处理程序希望监视文档中的所有冒泡事件，则可以是文档。文档元素在加载任何其他HTML之前都在文档的头部可用，因此可以安全地在那里附加事件，而无需等待文档准备就绪

一些示例代码：

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

使用

on

方法时，可以将其移出循环，因为不需要多次附加悬停事件

---

堆栈溢出线程讨论了上的

方法和

单击方法之间的区别，这也是一个有用的阅读：

在添加元素之前添加.products处理程序。在上一个循环中添加的元素将使用处理程序。最后添加的一个不是

改变

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

到

---

您还可以将处理程序代码从循环中取出。

在添加元素之前添加.products处理程序。在上一个循环中添加的元素将使用处理程序。最后添加的一个不是

改变

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

到

---

此外，您还可以将处理程序代码从循环中删除。

是否有理由在JavaScript中添加CSS，而不是在“.products”的：hover伪代码中添加黄色类？请也发布您的html代码。嵌套的.ready有什么原因吗？有什么原因让您在JavaScript中添加CSS而不是在“.products”类的：hover pseudo中添加黄色吗？请也发布您的html代码。有什么原因导致嵌套的.ready吗？