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?

Answer 1

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> 

Answer 2

Like this:

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

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