Not able to find data-id when selecting element

Question

Apologies in advance I feel as if this is a very simple solution and I am in the middle of a severe brain fart. I am simply trying to grab the data-id of an item I am clicking using ES6 syntax but no matter which way I run it I keep getting undefined.

HTML

<ul>
    <li class="list-item" data-id="item-1">Click me</li>
    <li class="list-item" data-id="item-2">Click me</li>
    <li class="list-item" data-id="item-3">Click me</li>
</ul>

JS

let $el = $('ul');

class List {
    constructor($el) {
        this.$el = $el;

        this.$listItem = $el.find('li');

        this.attachHandlers();
    }

    attachHandlers() {
        this.$listItem.on('click', () => {
            var data = $(this).attr('data-id');
            console.log(data);
        });
    }
}

const _init = () => {
    if ($el.length) {
        $el.each((i, v) => {
            new List($(v));
        });
    }
};

_init();

Ive simplified the code down as much as possible, anybody see what I am doing wrong here?

score 1 · Answer 1 · answered Nov 27 '17 at 04:48

1

The problem is in your attachHandlers method. Since you are using an arrow function, this refers to the class and not the element that was clicked.

Change the arrow function to a regular function.

answered Nov 27 '17 at 04:48

JJJ

3,314
4
29
43

31piy · Answer 2 · 2017-11-27T05:21:41.573

1

In addition to Josan's answer, if you want to continue using the arrow function, use it like this:

class List {
    constructor($el) {
        this.$el = $el;
        this.attachHandlers();
    }

    attachHandlers() {
        this.$el.on('click', 'li', (e) => {
            var data = $(e.currentTarget).attr('data-id');
            console.log(data);
        });
    }
}

For more discussion, refer to this thread.

edited Nov 27 '17 at 05:21

answered Nov 27 '17 at 04:54

31piy

23,323
6
47
67

this seems to return the data-id content of the first element in the list, not of the element that has been clicked. If I pass the event through and console.log e.currentTarget I can see the correct element but it always returns the data-id of the first element – user934902 Nov 27 '17 at 05:06
@user934902 -- Yes, because your constructor always sets the first `li` as `this.$listItem`. – 31piy Nov 27 '17 at 05:08
then I am confused about your answer on how using the arrow function as you have described will solve my issue – user934902 Nov 27 '17 at 05:18
@user934902 -- Please see my updated answer. That should solve the issue. You don't need to use `$listItem`. – 31piy Nov 27 '17 at 05:22

score -2 · Answer 3 · answered Nov 27 '17 at 05:06

-2

Simpler and easier by just using JQuery:

$(".list-item").on('click', function() {
  console.log($(this).data('id'));
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="list-item" data-id="item-1">Click me</li>
  <li class="list-item" data-id="item-2">Click me</li>
  <li class="list-item" data-id="item-3">Click me</li>
</ul>

answered Nov 27 '17 at 05:06

Milan Chheda

8,159
3
20
35

He is using jQuery – JJJ Nov 27 '17 at 05:30

Not able to find data-id when selecting element

3 Answers3