Getting values from a specific data attributes

Question

I'm trying to set up a tracking system that uses a data value for holding an event type. My HTML looks like this:

<a href="#articles" class="track" data-track="article_search_results">Articles</a>
<a href="#books" class="track" data-track="books_search_results">Books</a>
<a href="#notes" class="track" data-track="notes_search_results">Notes</a>

And the JQuery looks like this:

$(document).delegate('.track', 'click', function(e) {   
    console.log($(this));
    console.log($(this).data("track")); 
});

Using every element that has the class .track, I'm trying to get the data-track value from it, but it always returns undefined. What am I doing wrong?

UPDATE

I have icons in my code which is causing the problem:

<a href="#articles" class="track" data-track="article_search_results"><i class="icon-pencil"></i></a>

It does work without the icon..not sure why that is a problem... — Devin Dixon
– Devin Dixon, Commented Mar 29, 2013 at 1:10

Jace · Accepted Answer · 2013-03-29 00:52:32Z

1

Using attr, you can return the data-track value from an element, for example:

Code:

$(document).on('click', '.track', function(e) {   
    var dataTrack = $(this).attr("data-track");
});

According to the jQuery docs, delegate has been superseded by on, the above is an example using on

Alternatively, in your case, you can probably just use the click function, which I find neater, but up to you:

$(".track").click(function(e) {   
    var dataTrack = $(this).attr("data-track");
});

Fiddle:

Using on:
http://jsfiddle.net/jUSUK/1/

Using click:
http://jsfiddle.net/jUSUK/2/

More info on attr:

http://api.jquery.com/attr/

edited Mar 29, 2013 at 0:52

answered Mar 29, 2013 at 0:39

Jace

3,0722 gold badges24 silver badges34 bronze badges

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

1 Comment

Devin Dixon Over a year ago

Figured out what the problem is, code is fine by the syntax with an icon isn't

Khawer Zeshan · Accepted Answer · 2013-03-29 00:54:25Z

1

Try this

           $(document).delegate('.track', 'click', function(e) {   
                console.log($(this).attr("data-track")); 
           });

JsFiddle: http://jsfiddle.net/FZEKC/

edited Mar 29, 2013 at 0:54

answered Mar 29, 2013 at 0:39

Khawer Zeshan

9,6568 gold badges43 silver badges63 bronze badges

4 Comments

Devin Dixon Over a year ago

Figured out what the problem is, code is fine by the syntax with an icon isn't

Khawer Zeshan Over a year ago

Glad you have figured out the issue yourself

Devin Dixon Over a year ago

No, the issue still exist, just figured out the problem

Khawer Zeshan Over a year ago

why you dont assign the class to anchor instead of <i> tag? try this one <a href="#articles" class="track icon-pencil" data-track="article_search_results"></a>

Collectives™ on Stack Overflow

Getting values from a specific data attributes

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related