Динамически добавленный класс не может быть указан по какой-либо причине

Question

Когда я использую щелчки по ссылке, я добавляю класс к элементу:

<a class="js-link" data-category="cat123" href="#">some category</a>

javascript:

$(".js-link").click(function (e) {
        e.preventDefault();

        $(this).addClass(".js-category-selected");

    });

Когда пользователь отправляет форму поиска, яя пытаюсь получить ссылку, по которой щелкнули:

var selectedCategory = $(".js-category-selected").data("category");

console.log('selectedCategory:' + selectedCategory);

Это всегда возвращает неопределенное значение.

Не получается найти элемент.Что-то не так с этим подходом?Это потому, что этот класс добавляется динамически?Но я ничего не связываю, просто пытаюсь найти элемент.

Answer 1

Вам нужно удалить . в начале добавляемого вами класса:

$(".js-link").click(function(e) {
  e.preventDefault();
  $(this).addClass("js-category-selected");
  var selectedCategory = $(".js-category-selected").data("category");
  console.log('selectedCategory:' + selectedCategory);
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<a class="js-link" data-category="cat123" href="#">some category</a>

Answer 2

Вы добавляли имя класса с . при добавлении класса.Просто дайте имя и доступ, используя ., и чтобы получить данные, напишите функцию внутри обработчика, за ее пределами, к нему будут обращаться прежде, чем даже ссылка получит новый класс, и вы всегда получите undefined.

* 1005.* Используйте $(this).addClass("js-category-selected"); вместо $(this).addClass(".js-category-selected");

$(".js-link").click(function(e) {
  e.preventDefault();

  $(this).addClass("js-category-selected");
  var selectedCategory = $(".js-category-selected").data("category");

  console.log('selectedCategory:' + selectedCategory);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="js-link" data-category="cat123" href="#">some category</a>