jquery selector не работает при замене html!

Question

Пожалуйста, помогите мне с следующей проблемой:

<!-- this is the visible code --> 
<div id="divid">{some default content}<img class="img" src="GoNextArrow.jpg" alt=""></div> 

<!-- this is a hidden list of contents --> 
<div style="display: none;"> 
    <div id="divid1">{some content 1}<img class="img" src="GoNextArrow.jpg" alt=""></div> 
    <div id="divid2">{some content 2}<img class="img" src="GoNextArrow.jpg" alt=""></div> 
    <div id="divid3">{some content 3}<img class="img" src="GoNextArrow.jpg" alt=""></div> 
    <div id="divid4">{some content 4}<img class="img" src="GoNextArrow.jpg" alt=""></div> 
    <div id="divid5">{some content 5}<img class="img" src="GoNextArrow.jpg" alt=""></div> 
</div> 

<!-- this is an jquery script which replace the #divid with any of divid1-divid5 --> 
$('#divid').hide().html(elem.html()).fadeIn(); 
<!-- elem is a variable, divid1 to divid5, e.g. var elem = $j('#divid'+id); --> 

<!-- I need a rollover effect, I made it so: --> 
$('img.img').hover(function() { 
    $(this).attr('src', 'GoNextArrowHover.jpg'); 
}, function() { 
    $(this).attr('src', 'GoNextArrow.jpg'); 
}); 

Это хорошо работает для первого сНу дивиде, но не для divid1-divid5, когда они загружены вместо дивиде. Где моя ошибка ??

Спасибо!

Answer 1

Использование delegate()^(docs) для управления событиями внутри divid контейнера.

$('#divid').delegate('img.img','mouseenter',function() { 
    $(this).attr('src', 'GoNextArrowHover.jpg'); 
}) 
    .delegate('img.img','mouseleave', function() { 
    $(this).attr('src', 'GoNextArrow.jpg'); 
}); 

Или, если это возможно, сделать <img> в <a> элемент вместо этого, и просто сделать это с помощью CSS, используя background-image свойство:

#divid > div > a { 
    background-image:url(GoNextArrow.jpg); 
    background-repeate:no-repeat; 
} 
#divid > div > a:hover { 
    background-image:url(GoNextArrowHover.jpg); 
} 

Вам нужно несколько больше свойств, чтобы сделать это только право

Answer 2

При использовании .html() заменить содержимое элемента, вы создаете новые дочерние элементы (img в вашем случае), так что вам нужно пересвязать ваш hover обработчик нового img элемента после каждого вызова .html().

Answer 3

Используйте jQuery live, чтобы связать попытку наведения. Live mens, что функция будет применяться ко всем будущим элементам, которые также соответствуют селектору.

http://api.jquery.com/live/

$ (селектор) .live ('парения', функция() {});

Answer 4

Вместо повторного связывания .hover() каждый раз, просто использовать .live() и он будет работать для всех текущих и будущих элементов, которые соответствуют вашему селектора, пример ...

$('.hoverme').live('hover', function(event) { 
    if (event.type == 'mouseenter') { 
     $(this).attr('src', 'GoNextArrowHover.jpg'); 
    } 
    else { 
     $(this).attr('src', 'GoNextArrow.jpg'); 
    } 
}); 

Answer 5

Вы можете посмотреть в использовании replaceWith():

$('#divid').hide().replaceWith(elem.fadeIn()); 

Если вы уже связаны функции к событиям на elem, те должны сохраняться даже после того, как вы поменялись местами elem для другого элемента на странице.

Пример: http://jsfiddle.net/redler/eLD9A/