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    lt button class  toggleStatus  data-X10  C5  gt    I can t see what s wrong

User · Answer

Use plain javascript methods   x10Device   this dataset  x10

User · Answer

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

User · Answer

You can change the selector and data attributes as you wish           lt select id  selectVehicle  gt          lt option value  1  data-year  2011  gt Mazda lt  option gt          lt option value  2  data-year  2015  gt Honda lt  option gt          lt option value  3  data-year  2008  gt Mercedes lt  option gt          lt option value  4  data-year  2005  gt Toyota lt  option gt     lt  select gt       selectVehicle   change function           alert   this  find   selected   data  year           Here is the working example  https   jsfiddle net ed5axgvk 1

User · Answer

Changing the casing to all lowercases worked for me

User · Answer

Make sure to check if the event related to the button click is not propagating to child elements as an icon tag   lt 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    lt button data-x10  C5  gt       lt i class  fa fa-check  gt  lt  i gt  Text  lt  button gt      button toggleStatus   on  click   function  event        event preventDefault        event stopPropagation          event currentTarget  attr  data-X10

User · Answer

Iyap   Its work  Case sensitive in data name data-x10  var variable       myButton   data  x10       we get the value of custom data attribute

[jquery] jquery can't get data attribute value

Examples related to jquery

Examples related to html