Getting data-* attribute for onclick event for an html element

Question

<a id="option1" data-id="10" data-option="21" href="#" onclick="goDoSomething(?,?);">
       Click to do something
</a>

I want to get the data-id and data-option values inside the function goDoSomething(10, 21) I have tried to use this reference: this.data['id'] but it did not work.

How can I do this?

Here's an answer using vanilla JS https://stackoverflow.com/a/39670335/5049215 — Sia, Oct 25 '19 at 16:24

Krish R · Accepted Answer · 2013-11-17T12:14:18.920

You can achieve this $(identifier).data('id') using jquery,

    <script type="text/javascript">

        function goDoSomething(identifier){     
            alert("data-id:"+$(identifier).data('id')+", data-option:"+$(identifier).data('option'));               
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this);">
           Click to do something
    </a>

javascript : You can use getAttribute("attributename") if want to use javascript tag,

    <script type="text/javascript">

        function goDoSomething(d){
            alert(d.getAttribute("data-id"));
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this);">
           Click to do something
    </a>

Or:

    <script type="text/javascript">

        function goDoSomething(data_id, data_option){       

            alert("data-id:"+data_id+", data-option:"+data_option);
        }

    </script>

    <a id="option1" 
       data-id="10" 
       data-option="21" 
       href="#" 
       onclick="goDoSomething(this.getAttribute('data-id'), this.getAttribute('data-option'));">
           Click to do something
    </a>

As the author put the tag "jQuery", I recommend you to write the method with $(identifier).data('id') ;) — Maxime Lorant, Nov 17 '13 at 12:01

score 44 · Answer 2 · answered Nov 17 '13 at 11:40

44

Like this:

$(this).data('id');
$(this).data('option');

Working example: http://jsfiddle.net/zwHUc/

answered Nov 17 '13 at 11:40

CD..

72,281
25
154
163

This should be the accepted answer since this is what most people are looking for. – Zenahr Jan 05 '22 at 21:50

score 9 · Answer 3 · edited Feb 26 '15 at 02:53

9

I simply use this jQuery trick:

$("a:focus").attr('data-id');

It gets the focused a element and gets the data-id attribute from it.

edited Feb 26 '15 at 02:53

Sumner Evans

8,951
5
30
47

answered Feb 26 '15 at 02:11

Mobetoh

93
1
4

score 5 · Answer 4 · answered Dec 14 '19 at 06:20

Check if the data attribute is present, then do the stuff...

$('body').on('click', '.CLICK_BUTTON_CLASS', function (e) {
                        if(e.target.getAttribute('data-title')) {
                            var careerTitle = $(this).attr('data-title');
                            if (careerTitle.length > 0) $('.careerFormTitle').text(careerTitle);
                        }
                });

score 3 · Answer 5 · edited Nov 18 '20 at 07:39

3

function get_attribute(){ alert( $(this).attr("data-id") ); }

Read more at https://www.developerscripts.com/how-get-value-of-data-attribute-in-jquery

edited Nov 18 '20 at 07:39

tripleee

175,061
34
275
318

answered Nov 18 '20 at 06:52

Ravi Ameriya

31
3

James Kirkby · Answer 6 · 2013-11-17T11:57:35.057

2

here is an example

 <a class="facultySelecter" data-faculty="ahs" href="#">Arts and Human Sciences</a></li>

    $('.facultySelecter').click(function() {        
    var unhide = $(this).data("faculty");
    });

this would set var unhide as ahs, so use .data("foo") to get the "foo" value of the data-* attribute you're looking to get

edited Nov 17 '13 at 11:57

answered Nov 17 '13 at 11:45

James Kirkby

1,716
5
24
46

1

I'd rather `$('.facultySelecter').on("click", function() { var unhide = $(this).data("faculty"); });` – joninx Jun 11 '18 at 15:20

score 1 · Answer 7 · answered Aug 02 '22 at 17:17

you can directly use anchor id or data-action attributes to trigger the event.

Html Code

<a id="option1" data-action="option1" data-id="10" data-option="21" href="javascript:void(0);" title="Click Here">Click Here</a>

jQuery Code:

$('a#option1').on('click', function(e) {
    e.preventDefault();
    console.log($(this).data('id') + '::' + $(this).data('option')) ;   
});

OR

$('[data-action="option1"]').on('click', function(e) {
    e.preventDefault();
    console.log($(this).data('id') + '::' + $(this).data('option'));    
});

score 0 · Answer 8 · answered Nov 17 '13 at 11:57

0

User $() to get jQuery object from your link and data() to get your values

<a id="option1" 
   data-id="10" 
   data-option="21" 
   href="#" 
   onclick="goDoSomething($(this).data('id'),$(this).data('option'));">
       Click to do something
</a>

answered Nov 17 '13 at 11:57

adam187

3,193
21
15

Getting data-* attribute for onclick event for an html element

8 Answers8

Linked