jquery hover не работает в моем списке элементов - PullRequest
Новая
       25

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

1 голос
/ 25 февраля 2011

У меня странная проблема, я добавил функцию 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>');

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

спасибо Hemish

Ответы [ 3 ]

2 голосов
/ 25 февраля 2011

Попробуйте использовать события 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');
});
0 голосов
/ 26 февраля 2011

Наконец-то! Я использовал livequery, и это сработало! 

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

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

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

0 голосов
/ 25 февраля 2011

Если вам не нужна поддержка 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')
...