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

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 class 的元素时，这些元素不存在于 DOM然而当你在那之后打电话给 append 时。

另一个答案建议您可以在调用 append 后绑定 hover 事件。

另一种方法是使用 on 事件处理函数。这是来自 jQuery 的文档：http://api.jquery.com/on/。通过 on 函数，您可以使用委托事件，这将允许您在动态添加的元素上附加事件。

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers. This element could be the container element of a view in a Model-View-Controller design, for example, or document if the event handler wants to monitor all bubbling events in the document. The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

一些示例代码：

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

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

讨论 on 和 click 方法之间差异的 Stack Overflow 线程也是一个有用的读物：Difference between .on('click') vs .click()

Answer 3

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

改变

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

至

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

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

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

CSS hover not working in last record of JQuery loop

javascript

css

jquery

hover