Il est mentionné dans la .data()
documentation
Les attributs de données sont extraits lors du premier accès à la propriété de données, puis ne sont plus accédés ou mutés (toutes les valeurs de données sont ensuite stockées en interne dans jQuery)
Cela a également été abordé dans Pourquoi les modifications apportées à jQuery $ .fn.data () ne mettent-elles pas à jour les attributs html 5 data- * correspondants?
La démo de ma réponse originale ci-dessous ne semble plus fonctionner.
Réponse mise à jour
Encore une fois, à partir de la .data()
documentation
Le traitement des attributs avec des tirets incorporés a été modifié dans jQuery 1.6 pour se conformer à la spécification HTML5 du W3C.
Donc pour <div data-role="page"></div>
ce qui suit est vrai$('div').data('role') === 'page'
Je suis assez sûr que cela a $('div').data('data-role')
fonctionné dans le passé, mais cela ne semble plus être le cas. J'ai créé une meilleure vitrine qui se connecte au HTML plutôt que d'avoir à ouvrir la console et j'ai ajouté un exemple supplémentaire de conversion des attributs de données multi-tirets en camelCase .
Démo mise à jour (25/07/2015)
Voir également jQuery Data vs Attr?
HTML
<div id="changeMe" data-key="luke" data-another-key="vader"></div>
<a href="#" id="changeData"></a>
<table id="log">
<tr><th>Setter</th><th>Getter</th><th>Result of calling getter</th><th>Notes</th></tr>
</table>
JavaScript (jQuery 1.6.2+)
var $changeMe = $('#changeMe');
var $log = $('#log');
var logger;
(logger = function(setter, getter, note) {
note = note || '';
eval('$changeMe' + setter);
var result = eval('$changeMe' + getter);
$log.append('<tr><td><code>' + setter + '</code></td><td><code>' + getter + '</code></td><td>' + result + '</td><td>' + note + '</td></tr>');
})('', ".data('key')", "Initial value");
$('#changeData').click(function() {
// set data-key to new value
logger(".data('key', 'leia')", ".data('key')", "expect leia on jQuery node object but DOM stays as luke");
// try and set data-key via .attr and get via some methods
logger(".attr('data-key', 'yoda')", ".data('key')", "expect leia (still) on jQuery object but DOM now yoda");
logger("", ".attr('key')", "expect undefined (no attr <code>key</code>)");
logger("", ".attr('data-key')", "expect yoda in DOM and on jQuery object");
// bonus points
logger('', ".data('data-key')", "expect undefined (cannot get via this method)");
logger(".data('anotherKey')", ".data('anotherKey')", "jQuery 1.6+ get multi hyphen <code>data-another-key</code>");
logger(".data('another-key')", ".data('another-key')", "jQuery < 1.6 get multi hyphen <code>data-another-key</code> (also supported in jQuery 1.6+)");
return false;
});
$('#changeData').click();
Démo plus ancienne
Réponse originale
Pour ce HTML:
<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>
et ce JavaScript (avec jQuery 1.6.2)
console.log($('#foo').data('helptext'));
$('#changeData').click(function() {
$('#foo').data('helptext', 'Testing 123');
// $('#foo').attr('data-helptext', 'Testing 123');
console.log($('#foo').data('data-helptext'));
return false;
});
Voir la démo
En utilisant la console Chrome DevTools pour inspecter le DOM, le ne met pas à jour la valeur comme indiqué dans la console, mais le fait.$('#foo').data('helptext', 'Testing 123');
$('#foo').attr('data-helptext', 'Testing 123');