jquery hover не работает над моими элементами списка

Question

У меня возникла странная проблема, я добавил функцию hover к своим элементам списка, которые генерируются динамически с использованием ajax, но ничего не происходит. Код выполняется без ошибок, но без эффекта. Даже предупреждение не отображается для mouseenter и mouseout. Предупреждение появляется время от времени, но не каждый раз. Я использую следующий код.

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

Мой HTML-код

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

Пожалуйста, помогите мне, потому что я очень сильно застрял.

спасибо гемиш

Answer 1

Попробуйте использовать mouseover а также mouseout События. Я полагаю, ваш селектор фильтрации искал <li> элементы родителя?

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

---

и вы могли бы, возможно, немного очистить JQuery с новым классом CSS

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

и использовать 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');
});

Answer 2

В заключение! Я использовал livequery, и это сработало!

$('.category_list li').livequery("mouseenter", function() {
    $(this).css({'background-color' : '#A9A8A8'})
}).livequery("mouseleave", function() {
    $(this).css({'background-color' : '#F4F4F4'})
});

@ Патрик: Спасибо за помощь.

Надеюсь, это поможет и другим.

Answer 3

Если вам не нужно поддерживать IE6 с этой функцией, используйте вместо этого CSS:

Пример: http://jsfiddle.net/QLsQp/

.category_list li a {
    text-decoration:none;
}

.category_list li:hover a {
    text-decoration:underline;
}

Это использует :hover псевдо-селектор для воздействия на вложенные a элемент, когда li находится

---

Проблема с вашим JavaScript состоит в том, что это:

$(this).find('.category_list')

... ничего не найду, потому что .category_list является предком <li> элементы, а не потомок.

Вам нужно это вместо этого:

$(this).find('a')