jquery can't get data attribute value

Question

I am trying to set a variable in jQuery. The value is supposed to be set on the click event of the button. The onclick event fires but the x10Device variable remains undefined.

I am on jquery 1.7.1.

jQuery:

 $x10Device = $(this).data("X10");

HTML:

<button class="toggleStatus" data-X10="C5">

I can't see what's wrong.

Argo

What version of jQuery? – Linis

Insufficient information. Please share some more code. – Small

jQuery may convert attribute names to all lower-case, try: $(this).data("x10"); – Kaduna

Why is the answer closed as unclear ?? – Hoshi

I voted to re-open the question. It is quite clear what is being asked, and the traffic the question receives shows that it is a fairly common problem. – Linis

Answer 1

jQuery's data() method will give you access to data-* attributes, BUT, it clobbers the case of the attribute name. You can either use this:

$('#myButton').data("x10") // note the lower case

Or, you can use the attr() method, which preserves your case:

$('#myButton').attr("data-X10")

Try both methods here: http://jsfiddle.net/q5rbL/

Be aware that these approaches are not completely equivalent. If you will change the data-* attribute of an element, you should use attr(). data() will read the value once initially, then continue to return a cached copy, whereas attr() will re-read the attribute each time.

Note that jQuery will also convert hyphens in the attribute name to camel case (source -- i.e. data-some-data == $(ele).data('someData')). Both of these conversions are in conformance with the HTML specification, which dictates that custom data attributes should contain no uppercase letters, and that hyphens will be camel-cased in the dataset property (source). jQuery's data method is merely mimicking/conforming to this standard behavior.

Documentation

• data - http://api.jquery.com/data/
• attr - http://api.jquery.com/attr/
• HTML Semantics and Structure, custom data attributes - http://www.w3.org/html/wg/drafts/html/master/dom.html#custom-data-attribute

Linis

Also with .data(), when you use Camel Case like $(this).data("giveMeMyBananas") it will retrieve the html data of data-give-me-my-bananas="NO!" – Melanymelaphyre

Added that note, @BabyAzerty, as well as part of the reason for it (the HTML spec dictates custom attributes contain no capital letters) – Linis

@JasonMillington Glad to help! Check the note I put in about attr() vs. data() -- you might be more interested in attr() anyway, depending on how you will use the attributes. – Linis

I also found that data() will return an integer e.g. 1 whereas attr() returns a string, e.g. "1". This just means use == to compare, instead of ===. – Untouchable

I would rather say that data() stores the data in memory, while attr() stores on the DOM (html), so do not mix both functions when dealing with one specific element. So it means that you will never face the problem with the cached value from data() – Mireielle

Surely whether stored in cache/memory or DOM, changing the data value should change the data value. I appreciate and am helped by the warning about using attr when the data value will change but it make no sense to me that calling data to set a new value doesn't just reset the cache value as well. – Gerbold

Answer 2

Iyap . Its work Case sensitive in data name data-x10

var variable = $('#myButton').data("x10"); // we get the value of custom data attribute

Briquet

Answer 3

Make sure to check if the event related to the button click is not propagating to child elements as an icon tag (<i class="fa...) inside the button for example, so this propagation can make you miss the button $(this).attr('data-X10') and hit the icon tag.

<button data-x10="C5">
    <i class="fa fa-check"></i> Text
</button>

$('button.toggleStatus').on('click', function (event) {
    event.preventDefault();
    event.stopPropagation();
    $(event.currentTarget).attr('data-X10');
});

Thaumatrope

Answer 4

Use plain javascript methods

$x10Device = this.dataset("x10");

Dipterocarpaceous

Answer 5

Changing the casing to all lowercases worked for me.

Hemi

Answer 6

You can change the selector and data attributes as you wish!

 <select id="selectVehicle">
       <option value="1" data-year="2011">Mazda</option>
       <option value="2" data-year="2015">Honda</option>
       <option value="3" data-year="2008">Mercedes</option>
       <option value="4" data-year="2005">Toyota</option>
  </select>

$("#selectVehicle").change(function () {
     alert($(this).find(':selected').data("year"));
});

Here is the working example: https://jsfiddle.net/ed5axgvk/1/

Doucet