由于某种原因，无法引用动态添加的类

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);

这总是返回undefined。

我似乎找不到元素。这种方法有问题吗？是因为这个类是动态添加的吗？但我没有约束任何东西，只是试图找到元素。

Answer 1

在添加课程时，您正在使用.给出课程名称。只需使用.给出名称和访问权限，并获取数据在处理程序内写入函数，在它之外，即使链接获得新类也将访问它，您将始终获得undefined。

使用$(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>

Answer 2

你需要在你要添加的课程开始时删除.：

$(".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>