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.
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/Use plain javascript methods
$x10Device = this.dataset("x10");
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/
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');
});
Iyap . Its work Case sensitive in data name data-x10
var variable = $('#myButton').data("x10"); // we get the value of custom data attribute
Changing the casing to all lowercases worked for me.
Source: Stackoverflow.com