当html被替换时jquery选择器不起作用!

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

这对于第一个 div div 效果很好，但是当加载这些 div 而不是 div 时，则不适用于 div1-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> 元素，然后使用 background-image 属性通过 CSS 来实现:

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

您需要更多属性才能使其恰到好处