How to get data attribute of clicked link?

Question

I have the following event listener - how can I get the value of the data attribute of the clicked link. The console give me undefined in the example below?

 var removeLink = Dropzone.createElement("<a class='dz-remove' href='javascript:undefined;' data-file-id='2' >Remove file</a>");

 removeLink.addEventListener("click", (e) => {

      e.preventDefault();
      e.stopPropagation();

      var a = $(this);

      console.log(a.attr("data-file-id"));
 });

I can get it to work if I use the following syntax but I need to use the arrow function so that I can access some other properties:

removeLink.addEventListener("click", function (e) { ...});

I've tried the following but that get some other id altogether:

 var a = $(e.currentTarget); 

 console.log(a.attr("data-file-id"));

@Huangism not a duplicate why have you down voted? I've clearly shown what I've tried and it doesnt work - What I've tried is the same as whats in your linked questions and it doesnt work. — adam78, Dec 14 '17 at 18:14
@adam78 First I retracted the close vote after reading the question again, second I didn't down vote. You know what they say about assumptions — Huangism, Dec 14 '17 at 18:15
@JJJ I've looked at the post and it doesnt provide the answer to my question. I've also updated my own post to reflect that. — adam78, Dec 14 '17 at 18:21
@Huangism my apolgies. But I cant stand people downvoting without even attempting to answer the question and automatically assuming its a duplicate. — adam78, Dec 14 '17 at 18:23
@adam78 See my answer as to what was wrong with your approach. — zer00ne, Dec 14 '17 at 18:26
Yeah this is all duplicate. First off you're using the Arrow Function which does not have a *this* context so `var a = $(this);` does not do at all what you think it does, the duplicate link answer explains this. As for accessing a data attribute, there are already answers on SO doing this via pure JS and jQuery. Nothing in this question is original. — Erik Philips, Dec 14 '17 at 18:39

zer00ne · Accepted Answer · 2017-12-14T18:32:22.197

1

createElement() doesn't work that way. If you want to create a node using a string, use innerHTML or insertadjacentHTML()
Instead of this, use e.target
.attr() as a JavaScript method is deprecated, use getAttribute() instead.

 document.body.insertAdjacentHTML('beforeend', "<a class='dz-remove' href='javascript:undefined;' data-file-id='2' >Remove file</a>");
 
 var removeLink = document.querySelector('.dz-remove');

removeLink.addEventListener("click", (e) => {

  e.preventDefault();

  var tgt = e.target;

  e.stopPropagation();


  console.log(tgt.getAttribute('data-file-id'));
});

edited Dec 14 '17 at 18:32

answered Dec 14 '17 at 18:23

zer00ne

41,936
6
41
68

for `data-` attributes, the recommended practice is to use [.data()](https://api.jquery.com/data/). – Erik Philips Dec 14 '17 at 18:24
@ErikPhilips Wasn't aware plain JavaScript finally has that method, thanks....just searched MDN... not there? – zer00ne Dec 14 '17 at 18:27
You should use `e.currentTarget`, not `e.target`. – Bergi Dec 14 '17 at 18:31
If you clicked my link, it would have taken you to jQuery's website... – Erik Philips Dec 14 '17 at 18:31
@ErikPhilips I think the recommended practice is to avoid jQuery when it is not necessary and just use [`tgt.dataset.fileId`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset) – Bergi Dec 14 '17 at 18:33
2

@ErikPhilips I was being facetious, there's no `data()` method for plain JavaScript. – zer00ne Dec 14 '17 at 18:34
@Bergi the `e.currentTarget` and `e.target` are both `removeLink` in this case (unless I'm mistaken) Why would one be a better choice than the other? – zer00ne Dec 14 '17 at 18:36
@Bergi the following works fine `var id = e.target.getAttribute('data-file-id'); ` why use `e.currentTarget`? – adam78 Dec 14 '17 at 18:36
@adam78 If the markup changed so that the link would e.g. contain a `` or `` tag, it would not work when you clicked on the inner element. If you want an alias for `this`, it's `e.currentTarget` not `e.target`. – Bergi Dec 14 '17 at 18:38
@adam78 AFAIK `e.currentTarget` is the node registered to the event which in this case `removeLink`. `e.target` is the origin of the event more commonly referred to as the clicked element which in this case `removeLink` – zer00ne Dec 14 '17 at 18:39

cauchy · Answer 2 · 2017-12-14T18:35:17.203

0

Use

removeLink.addEventListener("click", (e) => {

      e.preventDefault();

      var target = e.currentTarget;

      e.stopPropagation();


      console.log(target.data('file-id'));
    });

edited Dec 14 '17 at 18:35

answered Dec 14 '17 at 18:26

cauchy

1,123
1
9
19

2

You should use `e.currentTarget`, not `e.target`. – Bergi Dec 14 '17 at 18:31

How to get data attribute of clicked link?

2 Answers2