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

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

这总是返回未定义。

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

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>