How to get the data-id attribute?

javascript html jquery custom-data-attribute
Bruce Adams picture Bruce Adams · Mar 15, 2011 · Viewed 1.6M times · Source

I'm using the jQuery quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice. How do I get the data-id attribute? I'm using the .on() method to re-bind the click event for sorted items.

Answer

Marcel Jackwerth picture Marcel Jackwerth · Mar 15, 2011

To get the contents of the attribute data-id (like in <a data-id="123">link</a>) you have to use

$(this).attr("data-id") // will return the string "123"

or .data() (if you use newer jQuery >= 1.4.3)

$(this).data("id") // will return the number 123

and the part after data- must be lowercase, e.g. data-idNum will not work, but data-idnum will.

Related questions

jQuery Data vs Attr?

What is the difference in usage between $.data and $.attr when using data-someAttribute? My understanding is that $.data is stored within jQuery's $.cache, not the DOM. Therefore, if I want to use $.cache for data storage, I should use $.data. …

Read More
jQuery: get data attribute

In my html I have a span element: <span class="field" data-fullText="This is a span element">This is a</span> And I want to get the data-fullText attribute. I tried these two ways, but they …

Read More
How to use a button's "data-" attribute to call a selected JavaScript function

I'm trying to set some data on my buttons such that it can be accessed onclick. I'm having no problem using JSON in a button's data attribute where the key value is a string. However, I can't figure out how …

Read More