Как правильно написать скрипт на JQuery .on?

Question

[Владислав Калнаус]

Подскажите пожалуйста есть код

$('.list_punkt li.active').on('click', function(){
        $('.list_punkt').addClass('active');
        $('.list_punkt li.active').removeClass('active');
        $('.list_punkt li').on('click', function(){
            $(this).addClass('active');
            $('.list_punkt').removeClass('active');
        });
    });

При нажатии на li.active открывается список и удаляется у этой li класс . После нажатия на другую li ему присваивается класс active . Проблема такая . Что при клике 2-й раз список не открывается и никаких действий не происходит . Скрипт срабатывает только 1 раз .

Как решить эту роблему?

Comments

[kulaeff]

У вас с кодом что-то не так, чего-то не хватает. Последние закрывающие скобки откуда?

[Владислав Калнаус]

kulaeff, пардон поправил

[kulaeff]

А зачем вы подписываетесь на click внутри уже существующего обработчика click? В этом и ошибка.

[Владислав Калнаус]

kulaeff, Как мне тогда запустить событие по нажатию на другой элеменит списка и добавить к нему класс?

[Justique]

Приведите пример html, а лучше залейте на jsfiddle или codepen

Answer 1

[kulaeff]

Предполагаю, что вам нужно что-то вроде такого:

$('.list_punkt li').on('click', function() {
  $('.list_punkt li.active').removeClass('active');
  $(this).addClass('active');
});

Если приведете HTML-код, то можно будет дать более точный ответ.

Comments

[Владислав Калнаус]

<div class="billing_novaya_styler">
	<ul class="list_punkt">
		<li class="">Выберите отделение</li>
		<li class="active">Відділення №1: вул. Польова, 67</li>
                <li>Відділення №2 (до 30 кг на одне місце): просп. Московський, 54а</li>
                <li>Відділення №3: вул. Тюрінська (ран. Якіра), 124 </li>
                <li>Відділення №4: вул. Достоєвського, 5</li><li>Відділення №5: пл. Ю. Кононенка, 1а (Автобазар "Лоск", приміщення "Приват Банку")</li>
                <li>Відділення №6: вул. Академіка Павлова, 120</li>
                <li>Відділення №7 (до 30 кг на одне місце): просп. Перемоги, 46-а</li>
                <li>Відділення №8 (до 30 кг): вул. Малогончарівська, 28/30 </li><li>Відділення №9 (до 30 кг): вул. Роганська, 101а</li>
</ul>
</div>

[Danil Sapegin]

$(function(){
	$(document).on('click', '.list_punkt li', function(){
		// your code
	}
});

уместо your code вставляете свои манипуляции. срабатывать будет каждый раз при клике

[kulaeff]

Владислав Калнаус, то есть список .list_punkt только один?

[kulaeff]

Владислав Калнаус, изменил свой ответ.