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

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

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

Answer 2

如果您要创建动态数据，请不要使用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添加委托，你应该使用{{ 1}}和mouseenter因为这基本上是mouseleave正在做的事情。

.hover(func(), func())

编辑：

添加了一个有效的jsFiddle动态创建的图片，$('.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'); } });会更改图像，然后在您完成悬停时返回。

jQuery悬停不使用动态元素

2 个答案: