[解決済み] jQuery Data()APIでデータ属性を設定できない

質問

MVCのビューに以下のようなフィールドがあります。

@Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" })</span>

別の js ファイルで data-helptext 属性に文字列を設定したい。以下は私のコードです。

alert($(targetField).data("helptext"));

$(targetField).data("helptext", "Testing 123");

は alert() の呼び出しは問題なく動作し、アラートダイアログにテキスト "古いテキスト" が表示されます。しかし data-helptext 属性を "Testing 123" に設定する呼び出しは機能しません。 "Old Text" はまだ属性の現在の値です。

data()の呼び出しの使い方が間違っているのでしょうか？ウェブで調べてみましたが、何が間違っているのかわかりません。

以下はHTMLのマークアップです。

<input data-helptext="Old Text" id="Course_Title" name="Course.Title" type="text" value="" />

どのように解決するのですか？

に記載されています。 .data() ドキュメント

data-属性は、dataプロパティが最初にアクセスされたときに引き込まれ、その後はアクセスも変異もされません（その後、すべてのデータ値はjQueryの内部に保存されます）。

また、このことは jQuery $.fn.data() への変更は、対応する html 5 data-* 属性を更新しないのはなぜですか？

以下の私の元の答えのデモは、もう動作しないようです。

更新された回答

今回もまた .data() ドキュメント

W3C HTML5仕様に準拠するため、jQuery 1.6でダッシュが埋め込まれた属性の扱いが変更されました。

そのため <div data-role="page"></div> の場合、次のようになります。 $('div').data('role') === 'page'

かなり確かなのは $('div').data('data-role') は過去に動作していましたが、今はもうそうではないようです。私は、Console を開く代わりに HTML にログを記録する、より良いショーケースを作成し、マルチハイフンをキャメルケースにする追加の例を追加しています。 データ-属性 に変換する例を追加しました。

デモを更新しました(2015-07-25)

こちらもご覧ください 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();

旧デモ

オリジナルの回答

このHTMLの場合。

<div id="foo" data-helptext="bar"></div>
<a href="#" id="changeData">change data value</a>

と、このJavaScript（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;
});

デモを見る

を使うことで Chrome DevTools コンソール を使用して DOM を検査すると $('#foo').data('helptext', 'Testing 123'); はしません。 で見られるように、値を更新します。 コンソール しかし $('#foo').attr('data-helptext', 'Testing 123'); はそうなります。