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/