jquery - 无法使用 jQuery Data() API 设置数据属性

Question

我在 MVC View 上有以下字段:

@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() 调用工作正常，它在警告对话框中显示文本“Old Text”。但是，将 data-helptext 属性设置为“Testing 123”的调用不起作用。 “旧文本”仍然是该属性的当前值。

我是否错误地使用了对 data() 的调用？我在网上查过这个，但看不出我做错了什么。

这是 HTML 标记:

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

Answer 1

它在 .data() documentation 中提到

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)

Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes? 也对此进行了介绍

下面我的原始答案中的演示似乎不再有效。

更新的答案

同样，来自 .data() documentation

The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification.

所以对于 <div data-role="page"></div>以下为真$('div').data('role') === 'page'

我相当确定$('div').data('data-role')过去曾工作过，但现在似乎不再如此。我创建了一个更好的展示，它可以记录到 HTML 而不必打开控制台，并向 camelCase data- attributes 添加了一个多连字符的附加示例。转换。

Updated demo (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();

---

Older demo

---

原始答案

对于这个 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;
});

See demo

使用 Chrome DevTools 控制台 检查 DOM，$('#foo').data('helptext', 'Testing 123'); 不更新在控制台中看到的值，但是$('#foo').attr('data-helptext', 'Testing 123');