CODEWITHSUNDEEP
javascriptjqueryhtml
cool breeze
cool breeze

Reputation: 4811

Dynamically added class cannot be referenced for some reason

When I use clicks on a link, I add a class to the element:

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

The javascript is:

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

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

    });

When the user submits a search form, I am trying to get the link that was clicked: 

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

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

This always returns undefined.

I can't seem to find the element. Is something wrong with this approach? Is it because this class is added dynamically? But I'm not binding anything, just trying to located the element.

Upvotes: 0

Views: 44

Answers (2)

Jack Bashford
Jack Bashford

Reputation: 44087

You need to remove the . at the start of the class you're adding:

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

Upvotes: 1

ellipsis
ellipsis

Reputation: 12152

You were giving class name with a . while adding the class. Just give the name and access using . and to get data write the function inside a handler, outside it, it will be accessed before even the link will get new class and you will always get undefined.

Use $(this).addClass("js-category-selected"); instead of using $(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>

Upvotes: 4

Related Questions