CODEWITHSUNDEEP
jqueryhtml
Jason Millington
Jason Millington

Reputation: 691

jquery can't get data attribute value

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.

Upvotes: 65

Views: 110131

Answers (6)

Everton Z. P.
Everton Z. P.

Reputation: 371

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');
});

Upvotes: 2

curiousBoy
curiousBoy

Reputation: 6834

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/

Upvotes: 1

Marvin Lacuna
Marvin Lacuna

Reputation: 1812

Changing the casing to all lowercases worked for me.

Upvotes: 1

Indra
Indra

Reputation: 31

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

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

Upvotes: 3

Yana Agun Siswanto
Yana Agun Siswanto

Reputation: 2032

Use plain javascript methods

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

Upvotes: 1

Chris Baker
Chris Baker

Reputation: 50592

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

Upvotes: 133

Related Questions