Я получаю данные из базы данных и в зависимости от количества совпадений, я хочу вывести это:
<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, которое отображается), и похоже, что оно не относится к другим изображениям.
Если вы собираетесь создать динамические данные, не используйте идентификатор, чтобы захватить их, потому что недействительно 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(...); вам нужно использовать делегат и использовать то, что я сказал выше, добавить делегата на основе класса, а не идентификатора, и вы должны использовать 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 изменение изображения, а затем назад, когда вы будете парить.
Вы должны использовать делегаты для динамически создаваемых объектов.
$(document).on("hover","#link_delete",function(){ $(this).attr('src', 'images/account_related/icons/link_delete_h.png'); });