附加元素的JQuery悬停状态

Question

我正在编写一个页面，一旦加载就会关闭并进行ajax调用，处理json respose数据，然后将这些元素附加到dom中，如下面的简化方式所示：

$.ajax({
  type: 'POST',
  url: "http://mysite.dev:32769/getallnews",
  success: function(data){
       $container.append(item)
        .isotope( 'appended', item );
  }
});

还应该注意我使用的是Metafizzy的同位素库。 http://isotope.metafizzy.co/

为了演示我的问题，我在加载时在DOM中有<div class="article-block"></div>，在ajax调用完成后再添加一个$(".article-block").hover(function(){ //hover on $(".article-block div").fadeIn(); },function(){ //hover off $(".article-block div").fadeOut(); }); 。

这个jquery只捕获第一个而不是第二个！

$('.article-block');

我花了一些时间调试它，发现当我在控制台中键入var time = 0; this.audioTimer = setInterval(function () { time += 1; if (time >= maxDurationInSeconds) { this.recorder.stop(); } }, 1000); 时。我弄错了。然而，当我将鼠标悬停在我的第一个上时，淡入淡出会起作用，当我将鼠标悬停在第二个上时，它不会。但

有什么想法吗？

Answer 1

订单重要

当页面加载时，您正在为初始div注册事件处理程序，这很好。重要的是要注意，如果稍后添加dom元素，则需要将处理程序应用于新项目。

尝试保存对处理程序的引用并稍后应用它。

function hoverOn() {
    $(".article-block div").fadeIn();
}
function hoverOff() {
    $(".article-block div").fadeOut();
}

// on page load
$('.article-block').hover(hoverOn, hoverOff);

// later in the ajax call
$.ajax({
    type: 'POST',
    url: "http://mysite.dev:32769/getallnews",
    success: function (data) {
        $(item).hover(hoverOn, hoverOff); // register your hover event to the
                                          // new element
        $container.append(item).isotope( 'appended', item );
    }
});