javascript - 附加元素的 JQuery 悬停状态

Question

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

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

还应注意，我使用的是 Metafizzy 的 Isotope 库。 http://isotope.metafizzy.co/

为了演示我的问题，我有一个 <div class="article-block"></div>加载时在 DOM 中，ajax 调用完成后又附加一个。

虽然这个 jquery 只会捕获第一个而不是第二个!

$(".article-block").hover(function(){
  //hover on
  $(".article-block div").fadeIn();
},function(){
  //hover off
  $(".article-block div").fadeOut();
});

我花了一些时间对此进行调试，发现当我输入 $('.article-block'); 时进入控制台。我都正确地得到了。但是，当我将鼠标悬停在我的第一个上时，淡入淡出起作用，而当我将鼠标悬停在第二个上时，它不起作用。

有什么想法吗？

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 );
    }
});