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

CSS hover not working in last record of JQuery loop

本文关键字：一条 记录 不起作用 最后 悬停 JQuery 循环 CSS      更新时间：2024-01-25

我有以下代码，只是为了显示一些结果，并在悬停时将<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>'

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

该代码不起作用，因为当您尝试将hover事件绑定到具有products类的元素时，在之后调用append时，这些元素还不存在于DOM中。

正如另一个答案所建议的，您可以在调用append之后绑定hover事件。

另一种选择是使用on事件处理程序函数。以下是jQuery的相关文档：http://api.jquery.com/on/.使用on函数，您可以使用委派事件，这将允许您在动态添加的元素上附加事件。

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

一些示例代码：

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

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

讨论on和click方法之间差异的Stack Overflow线程也是一个有用的读物：.on（'；click'；）与.click（）之间的差异

您应该将".haverage（）"设置在".append（）"方法之后

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

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

更改

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

至

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

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

相关文章：