Задать вопрос
Fedinamid
@Fedinamid
Front-End Developer

Почему toggleClass() работает не на всех элементах?

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Webpack test</title>
        <link rel="stylesheet" href="bootstrap.min.css">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <main>
            <div class="wrapper">
                <input class="form-control" type="text" id="input" title="text">
                <ul class="list-group" id="list">

                </ul>
            </div>
        </main>

        <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="common.js"></script>
    </body>
</html>


$(document).ready(function () {
    $('#input').keydown(function (e) {
        if (e.which === 13) {
            let li = $("<li></li>");
            $(li).text($(this).val());
            $(li).addClass("list-group-item");

            $("ul").append(li);

            $('li').click(function () {
                $(this).toggleClass("my-class");
            });
        }
    });

    $(document).keydown(function (e) {
        if (e.which === 46) {
            $('.my-class').remove();
        }
    });
});


Почему когда добавились элементы li в список, и при нажатии на них у некоторых меняется класс, а у некоторых нет. Помогите. Заранее спасибо
  • Вопрос задан
  • 267 просмотров
Подписаться 2 Оценить 1 комментарий
Решения вопроса 1
Fedinamid
@Fedinamid Автор вопроса
Front-End Developer
Всё решил! Надо было в месте присвоения обработчика li элементу указать не селектор li, а переменную li.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы