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

【问题标题】：CSS hover not working in last record of JQuery loopCSS悬停在jQuery循环的最后一条记录中不起作用
【发布时间】：2016-04-06 16:08:34
【问题描述】：

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


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

【问题讨论】：

您是否有理由在 JavaScript 中添加 CSS 而不是将黄色放在 ".products" 类的 :hover 伪中？
请也发布您的html代码。
嵌套 .ready 的任何原因？

标签： javascript jquery css hover

【解决方案1】：

代码不起作用，因为当您尝试将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 方法之间差异的堆栈溢出线程也是有用的阅读：Difference between .on('click') vs .click()

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

改变

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

到

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

您还可以将处理程序代码移出循环。

【讨论】：