2

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

Improve this question
7
  • Change () => to function() { if you want to use this to mean the button Commented Oct 12, 2020 at 10:49
  • 1
    Does this answer your question? Are 'Arrow Functions' and 'Functions' equivalent / interchangeable? Commented Oct 12, 2020 at 10:49
  • is their a better approach to do this? or do I have to use the old function () only ? Commented Oct 12, 2020 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 Commented Oct 12, 2020 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 thisto the target element. Commented Oct 12, 2020 at 10:52

1 Answer 1

Reset to default
5

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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
@NewToJavaScript Then it's because you have some html inside the buttons, but you never told us that.
so now, to access the data-* attribute, all I can do is use function () {} ?
@NewToJavaScript Look at the demo, i've updated the demo
also, is there a better approach to fetch dynamic button IDs in javascript?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.