Kush Murod wrote:
> if some of you heard of event bubbling then you'd have also
> experienced problem with .hover()
> to be more specific, once your content loads through ajax you won't
> have .hover anymore.
>
> with .click() it was straight forward where you bind event to
> parent.
>
> Difficulty I am facing is that I cannot attach .hover of parent so
> that children would have hover effect.
This is a bit trickier that with binding click, since the parents hover is
not triggered even through event bubbling when you hover over the children
it contains, since, technically you are still inside the parent.
You can go around this by using mouseover and mouseout instead of hover, and
it's not even that dirty. Ts usually with event bubbling, this will keep the
child elements acting as they should even when you dynamically add or remove
them, since the event is still bound to the parent.
HTML
-------
<div id="parentelem" style="background-color: #CCCCCC; padding: 10px">
<div class="childelem" style="margin: 10px; padding: 5px;background-color:
#BBB;">Child element 1</div>
<div class="childelem" style="margin: 10px; padding: 5px;background-color:
#BBB;">Child element 2</div>
<div class="childelem" style="margin: 10px; padding: 5px;background-color:
#BBB;">Child element 3</div>
<div class="childelem" style="margin: 10px; padding: 5px;background-color:
#BBB;">Child element 4</div>
</div>
JS:
---
$(document).ready(
function()
{
$('#parentelem').bind('mouseover',
function(event)
{
if($(event.target).is('.childelem'))
{
$(event.target).css('background-color','#FFF');
}
}
);
$('#parentelem').bind('mouseout',
function(event)
{
if($(event.target).is('.childelem'))
{
$(event.target).css('background-color','#BBB');
}
}
);
}
);
Hope it helps.
--
Suni
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
