jQuery悬停不适用于动态元素

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

 <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 图像），并且似乎不适用于其他图像。

如果您要创建动态数据，请不要使用 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 and 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');
    }    
});

EDIT:

添加了一个工作jsFiddle http://jsfiddle.net/qgTzE/4/动态创建的图像将on hover更改图像，然后在悬停完成后返回。