CSS hover JQuery döngüsünün son kaydında çalışmaz

Question

Bazı sonuçları görüntülemek ve hokkanın üzerinde <div> arka planını değiştirmek için aşağıdaki kodu kullanıyorum. Sonuncusu hariç tüm kayıtlarda (veya döngülerde) iyi çalışır. Herhangi bir ipucu?

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

Sen ".hover()" yöntemi ") (.Append" sonra olması belirlesin

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

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

Answer 2

Eğer unsurlara hover olayı bağlamak istediğinizde çünkü kod çalışmıyor products sınıfı ile, bu öğeler bundan sonra append olarak adlandırılırken DOM'de mevcut değildir.

Başka bir yanıt önerdiğinden, append numaralı telefonu arayarak hover etkinliğini bağlayabilirsiniz.

Bir alternatif on olay işleyicisi işlevini kullanmaktır. İşte jQuery: http://api.jquery.com/on/ için belgeler. on işleviyle, dinamik olarak eklenen öğeler üzerinde etkinlikler eklemenize olanak tanıyan temsilci etkinlikleri kullanabilirsiniz.

Yetki verilen olaylar, daha sonraki bir zamanda belgeye eklenen alt öğe öğelerinden olayları işleyebilmeleri avantajına sahiptir. Temsilci olay işleyicisinin eklendiği anda mevcut olması garanti edilen bir öğeyi seçerek, olay işleyicilerini sık sık ekleme ve kaldırma gereğini ortadan kaldırmak için yetkilendirilmiş etkinlikleri kullanabilirsiniz. Bu eleman bir model-Görünüm-Denetleyici tasarımında bir görünümün kap öğesi olabilir, örneğin, ya da olay işleyicisi belgede bütün kabarcıklanma olaylarını izlemek istiyorsa belge olabilir. Belge elemanı, başka bir HTML'yi yüklemeden önce belgenin başlığında bulunur, bu nedenle belgenin hazır olmasını beklemeden olayları buraya eklemek güvenlidir.

Bazı örnek kodu: vurgulu olayı birden çok kez takılarak tutmak gerekmez olarak

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

on yöntemi kullanılarak, sen olayın dışında taşıyabilirsiniz. Difference between .on('click') vs .click()

Answer 3

Sen eleman eklemeden önce .ÜRÜNLERİMİZ işleyicisi ekliyoruz: on ve click yöntem arasındaki farkları tartışıyor

Bir yığın taşması parçacığı da yararlı bir okuma olduğunu. Önceki döngüde eklenen eleman, işleyiciyi kullanacaktır. Son eklenen değil.

değişiklik

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

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

için Ayrıca olayın dışında işleyicisi kodunu alabilir.