jquery hover not working on my list items

Question

I am going thru a strange problem,I added hover function to my list items which are generated dynamically using ajax, but nothing is happening.The code is executing without any errors but with no effect.Even the alert is not displaying for mouseenter and mouseout.The alert pops up once in a while but not everytime.I am using the following code.

$('.category_list li').live("mouseenter", function() { 
alert('I m here');
  $(this).find('.category_list').css('text-decoration','underline');
}).live("mouseleave", function() {
alert('I m gone');
  $(this).find('.category_list').css('text-decoration','none');
}); 

My html code is

htmlData.push('<ul class="category_list">');
htmlData.push('<li><a href="javascript:void(0);" onclick="callGetApplicationDetails('+iIndex+',0);" >'+categoryName+'</a></li>');

Please help me since i am stuck very badly.

thanks Hemish

Answer 1

Try using the mouseover and mouseout events. I believe your filtering selector was looking for the <li> elements parent?

$('.category_list li').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') {
        alert('I m here');
        $(this).parent().css('text-decoration','underline');
    } else {
        alert('I m gone');
        $(this).parent().css('text-decoration','none');
    }
});

---

and you could probably clean up the jQuery a little with a new css class

.category_list.over
{
    text-decoration: underline;
}

and use toggleClass()

$('.category_list li').live('mouseover mouseout', function(event) {
    if (event.type == 'mouseover') { alert('I m here'); } 
    else { alert('I m gone'); }

    $(this).parent().toggleClass('over');
});