get data attribute value onclick link / button

Question

<span class="btn btn-block btn-inverse btn-icon glyphicons home" id="changeb" data-datac="daily"><i></i>Daily</span>
            <span class="btn btn-block btn-inverse btn-icon glyphicons home" id="changeb" data-datac="1week"><i></i>1 Week</span>
            <span class="btn btn-block btn-inverse btn-icon glyphicons home" id="changeb" data-datac="monthly"><i></i>Month</span>
            <span class="btn btn-block btn-inverse btn-icon glyphicons home" id="changeb" data-datac="3Month"><i></i>3 Month</span>

the jquery is

$('#changeb').click(function() {

        var d = $(this).data('datac');      
        alert(d);   
} );

I need to get the data-datac value on click event ,

instead id="changeb" use class="changeb"

Pranav C Balan
– Pranav C Balan

2013-12-12 10:05:09 +00:00
Commented Dec 12, 2013 at 10:05 — Pranav C Balan
– Pranav C Balan, Commented Dec 12, 2013 at 10:05

Adil · Accepted Answer · 2013-12-12 10:04:24Z

20

Your code is fine you have same id for more then one element which is not valid. The event will be binded to first element with given id in the DOM. Use common class instead of id to bind the event. You can use class selector to bind the event.

Live Demo

$('.btn').click(function() {
      var d = $(this).data('datac');      
      alert(d);   
});

answered Dec 12, 2013 at 10:04

Adil

148k25 gold badges217 silver badges207 bronze badges

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

Comments

Smurker · Accepted Answer · 2013-12-12 10:09:57Z

9

This should do the trick:

var d = $(this).attr("data-datac");

Also, you need to change your HTML to give each element a seperate id. But it can be a tedious task to bind click events for a number of different ids. So i'd bind it to a seperate class. For example:

HTML

<span class="btn btn-block btn-inverse btn-icon glyphicons home dateChanger" id="changeb1" data-datac="daily"><i></i>Daily</span>
<span class="btn btn-block btn-inverse btn-icon glyphicons home dateChanger" id="changeb2" data-datac="1week"><i></i>1 Week</span>
<span class="btn btn-block btn-inverse btn-icon glyphicons home dateChanger" id="changeb3" data-datac="monthly"><i></i>Month</span>
<span class="btn btn-block btn-inverse btn-icon glyphicons home dateChanger" id="changeb4" data-datac="3Month"><i></i>3 Month</span>

Javascript

$(".dateChanger").click(function () {
    var d = $(this).attr("data-datac");
    alert(d);
});

edited Dec 12, 2013 at 10:09

answered Dec 12, 2013 at 10:03

Smurker

7146 silver badges17 bronze badges

1 Comment

Pranav C Balan Over a year ago

instead of common id use class otherwise only first element will select

HTTP · Accepted Answer · 2013-12-12 10:11:12Z

3

You can get attribute values of an element using the attr in jquery like

$('.home').on('click', function() {

    var d = $(this).attr('data-datac');      
    alert(d);   
});

F.Y.I

If you will use id's as selector you can only get one element while on a class you can get reference all the elements containing that class

answered Dec 12, 2013 at 10:11

HTTP

1,7343 gold badges19 silver badges22 bronze badges

Comments

Illaya · Accepted Answer · 2013-12-12 10:06:14Z

1

Its Simple....

 var data_value = $(this).attr("data-datac");

answered Dec 12, 2013 at 10:06

Illaya

6666 silver badges14 bronze badges

Comments

Hanady · Accepted Answer · 2013-12-12 10:08:28Z

1

You can't set all the elements a unique id. That's why it's happening only for the first element.

answered Dec 12, 2013 at 10:08

Hanady

7992 gold badges16 silver badges40 bronze badges

Comments

ATeba · Accepted Answer · 2013-12-12 10:15:19Z

1

Use a unique id for each element

var d=$(this).attr('data-datac');

edited Dec 12, 2013 at 10:15

answered Dec 12, 2013 at 10:12

ATeba

338 bronze badges

1 Comment

HTTP Over a year ago

class is the best way in this scenario

Collectives™ on Stack Overflow

get data attribute value onclick link / button

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related