функция не видит вновь добавленные классы

#javascript #jquery

#javascript #jquery

Вопрос:

У меня есть навигация, которая исчезает и исчезает цвет текста при наведении курсора мыши. Он делает это на основе неактивного класса.

Он работает отлично, за исключением страницы, которая изначально активна.

Когда я меняю страницы (через ajax) Я добавляю «неактивный» класс к элементу, который ранее был «активным», но моя функция не замечает его как такового. В веб-инспекторе я вижу, что активный класс удаляется, а неактивный класс добавляется правильно. Есть предложения?

 ('header#primary nav a.inactive').hover(
    function(){
        $(this).stop().animate({'color': '#ffffff'}, 'slow');
    },
    function() {
        $(this).stop().animate({'color': '#a2a2a2'}, 'slow');
    });
  

Ответ №1:

Вам нужно использовать live функцию jquery для динамически добавляемых элементов.

  $('header#primary nav a.inactive').live('mouseenter' ,function(){
            $(this).stop().animate({'color': '#ffffff'}, 'slow');
        }).live('mouseleave',
        function() {
            $(this).stop().animate({'color': '#a2a2a2'}, 'slow');
        });
  

http://api.jquery.com/live/

Ответ №2:

Короткий ответ: вместо этого используйте функции .live() или .delegate() . Документ jQuery дает объяснение того, как они работают, и единственная проблема hover() , с которой вы столкнетесь, это то, что вместо метода быстрого доступа вам нужно будет выполнить комбинацию mouseenter() и mouseleave() .

Средний ответ:

Когда вы назначаете обработчики событий (будь то наведение, щелчок, что угодно) непосредственно на основе селектора jQuery, например, вашего кода:

 $('header#primary nav a.inactive').hover( /* your code */ );
  

В нем говорится: «найдите все элементы DOM, которые соответствуют селектору прямо в этот момент, и назначьте им обработчик событий (наведите курсор)». Он определенно не следит за тем, когда элементы могут быть изменены, чтобы соответствовать селектору в будущем, и не удаляет обработчики из элементов, если они изменены таким образом, что они больше не совпадают.

Вместо этого вы хотите использовать .live() или .delegate() , которые будут обрабатывать события для элементов, которые соответствуют селектору сейчас или в будущем.

Длинный ответ: упс, у меня нет времени писать это, и на самом деле вам не нужно, чтобы я объяснял, как .live() и .делегировать (), когда они описаны в документе jQuery.