jQuery悬停不适用于动态元素

Question

我从数据库中获取数据，根据匹配的数量，我想输出这个：

 <div id='link_delete_holder' style='position:absolute;left:590px;top:10px'>
            <img id='link_delete' src='images/account_related/icons/link_delete.png'/>
        </div>

我希望该图像在悬停时发生变化，所以我使用以下代码：

$('#link_delete').hover(function(){
    $(this).attr('src', 'images/account_related/icons/link_delete_h.png');
}, function(){
    $(this).attr('src', 'images/account_related/icons/link_delete.png');
    });

现在，问题在于它仅适用于第一条记录（显示的第一个 link_delete 图像），并且似乎不适用于其他图像。

Answer 1

如果您要创建动态数据，请不要使用 ID 来获取它们，因为具有相同 ID 的两个元素是无效的 HTML。使用同名的类就可以了。

<div id='link_delete_holder' style='position:absolute;left:590px;top:10px'>
    <img class='link_delete' src='images/account_related/icons/link_delete.png'/>
</div>

此外，正如 Anoop Joshi 指出的那样，您不能直接使用 $('#link_delete').hover(...);，您需要使用委托并使用我上面所说的添加基于类而不是 ID 的委托，并且您应该使用 mouseenter 和mouseleave 本质上就是 .hover(func(), func()) 正在做的事情。

$('.link_delete').on({
    mouseenter: function () {
        $(this).attr('src', 'images/account_related/icons/link_delete_h.png');
    },
    mouseleave: function () {
        $(this).attr('src', 'images/account_related/icons/link_delete.png');
    }    
});

编辑：

添加了一个有效的jsFiddle，它动态创建了图像，on hover 会更改图像，然后在您完成悬停时返回。

Answer 2

您应该将delegates 用于动态创建的对象。

$(document).on("hover","#link_delete",function(){
  $(this).attr('src', 'images/account_related/icons/link_delete_h.png');
});