Unable to get Data Attribute value of dynamically generated buttons in jQuery

Question

I am new to JavaScript and was trying to figure our how to access data attribute values of dynamically generated buttons. I was passing my ID coming from the Database to "data-id" attribute. Below is the dynamically generated code for my buttons

<button class='btn btn-sm btn-primary aButton' data-id='1234'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>

Now i wanted to access these buttons onclick using jquery to perform some actions. Below is my code for that

$(document).on('click', '.aButton', () => {
    let id = $(this).attr('data-id');
    console.log(id);
})

The above console gives me "undefined" with the thick arrow function. When I tried to do the same with function () {}, it gave me the dynamic ID stored in the data attribute of the button.

What is happening with this? Is there a better approach to get a dynamic ID of button on click. Thank you all in advance. Have a nice day :)

Change `() =>` to `function() {` if you want to use `this` to mean the button — freedomn-m, Oct 12 '20 at 10:49
Does this answer your question? [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) — freedomn-m, Oct 12 '20 at 10:49
is their a better approach to do this? or do I have to use the old function () only ? — Mann, Oct 12 '20 at 10:50
the 'old function' is not obsolete. Arrow functions have not replaced 'normal functions'. However, you can use `bind` if you want to use arrow functions still. Although I would personally just use function as @freedomn-m has suggested — Rezaa91, Oct 12 '20 at 10:51
@NewToJavaScript both implementations are good but `() =>` has a diffrent implementation of `this`, you can pass the event and you can get the target element from it. While using `function() {` refers `this`to the target element. — Stutje, Oct 12 '20 at 10:52
@NewToJavaScript Also `() =>` (fat arrow function) is not supported to all browsers/versions. While using `function() {` is more natively. — Stutje, Oct 12 '20 at 10:56

Carsten Løvbo Andersen · Accepted Answer · 2020-10-12T11:16:19.947

4

When you use arrow function () => {} then jquery don't know what this refers to so use:

$(document).on('click', '.aButton', (e) => {
  let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
  console.log(id);
})

Demo

$(document).on('click', '.aButton', (e) => {
  let id = $(e.target).attr('data-id') || $(e.target).closest('.aButton').attr('data-id');
  console.log(id);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class='btn btn-sm btn-primary aButton' data-id='1234'><i>testers</i></button>
<button class='btn btn-sm btn-primary aButton' data-id='12345'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12346'></button>
<button class='btn btn-sm btn-primary aButton' data-id='12347'></button>

edited Oct 12 '20 at 11:16

answered Oct 12 '20 at 10:49

Carsten Løvbo Andersen

26,637
10
47
77

my e.target returns "i.fa.fa-ellipsis-h", the font awesome part. when i wrote $(e.target).attr('data-id'), it logged undefined to console – Mann Oct 12 '20 at 10:57
@NewToJavaScript Then it's because you have some html inside the buttons, but you never told us that. – Carsten Løvbo Andersen Oct 12 '20 at 10:58
so now, to access the data-* attribute, all I can do is use function () {} ? – Mann Oct 12 '20 at 10:58
@NewToJavaScript Look at the demo, i've updated the demo – Carsten Løvbo Andersen Oct 12 '20 at 10:59
also, is there a better approach to fetch dynamic button IDs in javascript? – Mann Oct 12 '20 at 10:59
@NewToJavaScript Just click on `Show code snippet` and you can see i've added an `` to one of the buttons and it works just fine with that inside the button. – Carsten Løvbo Andersen Oct 12 '20 at 11:02
You could also do something like: `var btn = $(e.target); if (!btn.Is(".aButton")) btn = btn.closest(".aButton");` then you have the button element if you need to do anything else with it – freedomn-m Oct 12 '20 at 11:19

Unable to get Data Attribute value of dynamically generated buttons in jQuery

1 Answers1