JQuery селектор -

Question

Я схожу с ума, пытаясь понять, почему мой код не работает.

Я устанавливаю элемент li с активным классом, который работает ..

Затем я хочу выбрать тот элемент li, у которого есть класс 'active' - и дать ему функцию щелчка, которая перемещаетеще один div в поле зрения, который также идентифицируется классом 'active'

. Вот мой код:

$(".contentPanel").click(function() {
  $(this).siblings().animate({height: minHeight,},500).removeClass("active");
  $(this).animate({height: maxHeight,},500).addClass("active");
  $('li').removeClass("active");
  $(this).children('ul').children('li').addClass("active");
  $('.infoPanelSlider').removeClass("active");
  $(this).children('.infoPanelWindow').children('.infoPanelSlider').addClass("active");
});

. Приведенные выше работы дают элементы li внутри активного 'contentPanelSlider'класс активный.

Следующий бит, где я застрял:

Я хочу написать это:

$ ('li.active'). Click (function () .... сделать что-то

но активная часть, похоже, не работает - она ​​работает, если я просто нацеливаюсь на li, без селектора активного класса ...

Интересно,это как-то связано с тем, что активный класс был добавлен JQuery на лету, а не жестко закодирован в таблице стилей - но это полная догадка.

Пожалуйста, помогите, если можете, я неум становится пламенным ...

Answer 1

Да, ваши подозрения верны.Селекторы jQuery разрешаются во время выполнения.Если вы ищете li.active во время запуска сайта, ничего не найдено.jQuery предлагает live() и delegate(), которые могут обойти эту проблему, проверяя каждое событие клика на более высоком уровне.

Answer 2

Да. Это происходит потому, что класс был добавлен на лету. Используйте живую функцию jquery для привязки события click к li

$ ( 'li.active'). Жить ( 'нажмите', функция () { //Сделай что-нибудь. });

Answer 3

Вы можете прикрепить обработчик ко всем li и проверить, есть ли у них класс active:

$('li').click(function() {
    if($(this).is('.active')) {
        // do more
    }
});

Еще лучше (если у вас много li с) - delegate событие. Это добавит только один обработчик событий (тогда как предыдущее решение добавило обработчик событий к каждому элементу li и, таким образом, потребляло больше памяти). Вам просто нужно иметь общего предка:

ancestor.delegate('li.active', 'click', function() {
      // do more
});

---

$('li.active') будет работать только в том случае, если li s имеют этот класс в момент, когда вы назначаете обработчик , а не при выполнении обработчика. Таким образом:

$(".contentPanel").click(function(){});
$("li.active").click(function(){});

не будет работать, если в этом классе еще нет элементов li, но этот

$(".contentPanel").click(function() {
    // add class to li
    $('li.active').click(function(){});
});

будет работать. Но это также добавит обработчик событий каждый раз, поэтому лучше назначать один раз и тестировать.

Answer 4

Если live не работает, вы можете попробовать связать:

$('li.active').bind('click',function(){
//do something 
});