Does jQuery internally convert HTML5 data attribute keys to lowercase?
html, javascript, jquery
Solution
If you use
data-action-method="delete"
then you can access the attribute with
$('.action').data('actionMethod')
This is part of the HTML5 DOM API:
The custom data attributes is transformed to a key for the DOMStringMap entry with the following rules:
- any dash (U+002D) is removed;
- any letter following a dash (U+002D), before its removal, is set in its uppercase counterpart.
Problem
I am trying to conform my JavaScript coding style to my Zend coding style as much as possible, which is using camelCase. So, in my HTML5 data attributes, I am naming them as in this example: ``` <button class="action" data-actionClass="user" data-actionMethod="delete" data-actionRequest="/user/delete/user-id/1" data-actionComplete="{reload:users}">Delete User #1</button> <div id="users" data-reloadRequest="/user/index"> ... </div> ``` Pretty unobtrusive way to harness Jquery for actions, but when I call $('.action').data(), the attribute names are converted to lowercase. Any workarounds for this? I never though JavaScript variables should have dashes in them, and I can't understand why jQuery is internally doing this for me? Or maybe it is HTML5?