无法使用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”的调用不起作用。 “旧文本”仍然是属性的当前值。

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

这是HTML标记：

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

---

它在.data()文档中提到

数据属性在第一次访问数据属性时被拉取，然后不再被访问或变异（所有数据值都被内部存储在jQuery中）

这也包括在为什么不更改jQuery $ .fn.data（）更新相应的html 5 data- *属性？

下面我的原始答案的演示似乎不再适用。

更新了答案

再次，从.data()文档

在jQuery 1.6中修改了嵌入破折号属性的处理方式，以符合W3C HTML5规范。

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

我相当肯定$('div').data('data-role')在过去有效，但似乎不再是这种情况。 我已经创建了一个更好的展示，它可以记录到HTML，而不必打开控制台，并为驼峰数据属性转换添加了多连字符的附加示例。

更新演示（2015-07-25）

另请参阅jQuery数据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 Console检查DOM， $('#foo').data('helptext', 'Testing 123'); 不会更新控制台中的值，而是$('#foo').attr('data-helptext', 'Testing 123'); 确实。

---

我遇到了严重的问题

.data('property', value);

它没有设置data-property属性。

开始使用jQuery的.attr() ：

获取匹配元素集合中第一个元素的属性值，或为每个匹配元素设置一个或多个属性。

.attr('property', value)

设置值和

.attr('property')

检索值。

现在它只是工作！

---

@andyb接受的答案有一个小错误。 除了我上面对他的帖子的评论......

对于这个HTML：

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

你需要像这样访问属性：

$('#foo').attr('data-helptext', 'Testing 123');

但数据方法是这样的：

$('#foo').data('helptext', 'Testing 123');

上面的.data（）方法的修复将防止“未定义”，并且数据值将被更新（而HTML不会）

“data”属性的要点是将一个值与元素绑定（或“链接”）。 非常类似于onclick="alert('do_something')"属性，它将一个动作绑定到元素上......文本没用，你只需要单击元素时动作就可以工作。

一旦数据或操作绑定到元素，通常*不需要更新HTML，只需要数据或方法，因为这是您的应用程序（JavaScript）将使用的内容。 性能明智，我不明白为什么你也想更新HTML，没有人看到HTML属性（除了在Firebug或其他控制台）。

您可能想要考虑的一种方式：HTML（与属性一起）只是文本。 JavaScript使用的数据，函数，对象等存在于单独的平面上。 只有当JavaScript被指示这样做时，它才会读取或更新HTML文本，但是您使用JavaScript创建的所有数据和功能都完全独立于您在Firebug（或其他）控制台中看到的HTML文本/属性。

*我强调通常是因为如果你有一种情况需要保存并导出HTML（例如某种微格式/数据感知文本编辑器），而HTML会在另一页上加载新鲜的HTML，那么可能需要更新HTML太。

链接地址: http://www.djcxy.com/p/59043.html

上一篇: Unable to set data attribute using jQuery Data() API

下一篇: Inject javascript at the very top of the page \ Anti iframe