Как обратиться к элементу по динамически добавленному классу?

Question

[Елизавета Красова]

Добрый день всем.
Подскажите, пожалуйста, решение для такого вопроса.
Создаём слайдер с привязанным к нему меню. Суть слайдера заключается в следующем: слайдер "привязан" к определённой вкладке меню. При перелистывании слайдера меняется и отображение активной категории в меню.
Меню

<div id="menu">
<nav>
   <ul>
       <li id="menu-1" class="default"><a href="[~4~]">Бухгалтерские услуги</a></li>
       <li id="menu-2" class="default"><a href="[~35~]">Кадровый консалтинг</a></li>
       <li id="menu-3" class="default"><a href="[~40~]">Финансовые услуги</a></li>
       <li id="menu-4" class="default"><a href="[~34~]">Охрана труда</a></li>
       <li id="menu-5" class="default"><a href="[~28~]">Центр поддержки предпринимателя</a></li>
   </ul>
</nav>
</div>

Слайдер

<div id="rev_slider_1_1" class="rev_slider fullwidthabanner">
<ul>    
<li id="slide-1" class="active-revslide">
<img src="assets/images/slides/1slide_new.jpg"
</li>
    
<li id="slide-2" class="active-revslide">
<img src="assets/templates/konsalt/ppip.jpg"
</li>
    
<li id="slide-3" class="active-revslide">
<img src="/assets/templates/konsalt/2slide.jpg"
</li>
 
<li id="slide-4" class="active-revslide">
<img src="assets/images/slides/3slide.jpg"
</li>
    
<li id="slide-5" class="active-revslide">
<img src="assets/images/slides/4slide.jpg">
</li>
</ul>
</div>

Код-js который пробую применить

function($){
     
        var $menu1 = $("#menu-1");
        var $slide1 = $("#slide-1");
 
        if($slide1.hasClass("current-sr-slide-visible"))
        { $menu1.removeClass("default").addClass("active"); }
        else
        { $menu1.removeClass("active").addClass("default"); }
}

Перейду ближе к проблеме: к слайду динамически добавляется класс "current-sr-slide-visible", т.е. активный в данный момент. Я пытаюсь проверить есть ли у слайда этот класс и если такой есть, то отметить определённую категорию в меню.
Буду рада любой помощи. Уже отчаялась с этим слайдером.

Comments

[ivandao]

>Буду рада любой помощи. Уже отчаялась с этим слайдером.

Пиши о себе в мужском роде!1

Этот твой function($){... когда вызывается?

[Антон]

Прежде чем что-то писать, изучите тему "события".
Смена слайда - событие, и по данному событию уже и надо проводить какие-то действия.
Есть ли система событий в вашем слайдере - обратитесь к документации.

[Сергей Карвасарный]

посмотри документацию слайдера там обычно есть события переключение по слайдам и активный слайд и там уже будешь вешать, что тебе нужно, потому, что не ясно как ты проверять будешь если ты нажимаешь листать и тебе только в ту секунду вешается этот класс, тебе по любому нужно сверить после того как он навесился и должно быть собития - нажатие, ховер или что-то другое, вот тебе нужно событие переключение слайдера, если слайдер толковый обычно в документации все есть.

[Елизавета Красова]

Сергей Карвасарный, спасибо за толковый ответ

[Сергей Карвасарный]

ElizavetaKrasova, https://owlcarousel2.github.io/OwlCarousel2/ вот можешь его полистать, довольно крутой слайдер и документация есть, если найдешь там эти события можешь использовать. или tiny-slider он на js, вдохновлялись люди как раз owl слайдером.

[Сергей Карвасарный]

ElizavetaKrasova, https://owlcarousel2.github.io/OwlCarousel2/docs/a... вот тут полистай события

[Елизавета Красова]

Сергей Карвасарный, спасибо огромное за пример. Обязательно его изучу

Answer 1

[atomos90]

Можно обращаться через уже существующий родительский элемент DOM (например document):
$(document).on('click', '.динамически добавленный класс', function(){
...
});

$(document).delegate('.динамически добавленный класс, 'click', function(){
...
});
использовать on или delegate в зависимости от версии jquery