Селектор jquery не работает при замене html! - PullRequest
Новая
       3

Селектор jquery не работает при замене html!

1 голос
/ 23 января 2011

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

<!-- 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');
});

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

Спасибо!

Ответы [ 5 ]

2 голосов
/ 23 января 2011

Используйте delegate() (документы) для управления событиями внутри контейнера 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);
}

Вам понадобится еще несколько свойств, чтобы все было правильно

1 голос
/ 23 января 2011

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

$('.hoverme').live('hover', function(event) {
    if (event.type == 'mouseenter') {
        $(this).attr('src', 'GoNextArrowHover.jpg');
    }
    else {
        $(this).attr('src', 'GoNextArrow.jpg');
    } 
});
0 голосов
/ 23 января 2011

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

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

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

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

0 голосов
/ 23 января 2011

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

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

$ (селектор) .live ('hover', function () {});

0 голосов
/ 23 января 2011

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

...