无法使用jQuery数据设置数据属性（）API [英] Unable to set data attribute using jQuery Data() API

问题描述

我已经有了一个MVC视图以下字段：

  @ Html.TextBoxFor（型号=＆GT; model.Course.Title，新{data_helptext =古文字}）＆LT; / SPAN＆GT;
 

在一个单独的js文件，我想在数据帮助文件属性设置为一个字符串值。这里是我的code：

 警报（$（targetField）。数据（帮助文件））;$（targetField）。数据（帮助文件，测试123）;
 

的警报（）调用工作正常，它显示在警报对话框文本古文字。但是，调用设置数据帮助文件属性设置为测试123无法正常工作。 老文本仍是属性的当前值。

我使用的呼叫数据（）不正确？我看这件事在网络上，我看不出有什么我做错了。

下面的HTML标记：

 ＆LT;输入数据帮助文件=古文字ID =COURSE_TITLENAME =Course.Title类型=文本值=/＆GT;
 

解决方案

据在 。数据提到（） 文档

  

Data-用属性拉在第一时间中的数据属性被访问，然后不再访问或突变的（所有数据值然后存储在内部的jQuery）

这也被覆盖在<一个href=\"http://stackoverflow.com/questions/5507718/why-dont-changes-to-jquery-fn-data-update-the-corresponding-html-5-data-at/5507828#5507828\">Why不要更改jQuery的$ .fn.data（）更新相应的HTML 5的数据 - *属性？

在我的下面原来的答复演示似乎没有工作了。

更新答案

再次从 。数据（）文档

  

嵌入破折号的jQuery 1.6改变属性的处理，以符合W3C的HTML5规范。

因此​​，对于＆LT; D​​IV数据角色=页面＆GT;＆LT; / DIV＆GT; 以下是真实的 $（'格' ）。数据（'角色'）===页面

我相当确信 $（'格'）。数据（数据角色'）在过去的工作，但似乎并没有成为案件了。我创建了一个更好地展示其记录到HTML而不必打开控制台，并添加了多连字符的附加例子驼峰<一个href=\"http://www.w3.org/TR/html5/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes\">data-属性转换。

的更新演示（2015-07-25）

另请参见 jQuery的数据VS的Attr？

HTML

 ＆LT; D​​IV ID =是changeme数据键=卢克数据的另一个键=维达＆GT;＆LT; / DIV＆GT;
＆所述; A HREF =＃ID =changeData＆GT;＆下; / A＆GT;
＆LT;表ID =日志＆GT;
    ＆LT; TR＆GT;＆LT;第i二传手＆LT; /第i个百分位＆GT;吸气＆LT; /第i个百分位＆GT;调用的getter和LT的结果; /第i个百分位＆GT;注意＆LT; /第i＆LT; / TR＆GT;
＆LT; /表＆gt;
 

的JavaScript （jQuery的1.6.2 +）

 变量$ changeMe = $（'＃changeMe'）;
变量$日志= $（'＃日志'）;VAR记录;
（记录=函数（setter方法​​，吸气剂，注）{
    注意=注意|| '';
    的eval（'$ changeMe'+二传手）;
    VAR的结果=的eval（'$ changeMe'+吸气）;
    $ log.append（'＆LT; TR＆GT;＆LT; TD＆GT;＆LT; code＆GT;'+二传手+'＆LT; / code＆GT;＆LT; / TD＆GT;＆LT; TD＆GT;＆LT; code＆GT; '+吸气+'＆LT; / code＆GT;＆LT; / TD＆GT;＆LT; TD＆GT;'+结果+'＆LT; / TD＆GT;＆LT; TD＆GT;'+音符+'＆LT; / TD＆GT;＆LT; / TR＆GT ;'）;
}）（''，。数据（钥匙），初始值）;$（'＃changeData'）。点击（函数（）{
    //组数据，关键新价值
    记录仪（数据（'键'，'累啊'），。数据（钥匙），期望jQuery的节点对象累啊，但DOM保持卢克）;
    //尝试通过.attr设置数据的关键，并通过一些方法得到
    记录仪（ATTR（'数据键'，'尤达'），。数据（钥匙），期望jQuery对象，但现在DOM对尤达莱亚（仍然））;
    记录仪（，.attr（'键'），预期不确定的（无ATTR＆LT; code＆GT;密钥LT; / code基））;
    记录仪（，.attr（'数据键'），预计在尤达DOM和jQuery对象上）;    //加分
    记录器（''，。数据（数据键'），预期不确定的（通过这种方法不能得到））;
    记录仪（数据（'anotherKey'），。数据（'anotherKey'），jQuery的1.6+得到多连字符＆LT; code取代;数据的另一个-Key与LT; / code＆gt;中） ;
    记录仪（数据（'另一个键'）。，。数据（另一个键'），jQuery和LT; 1.6获得多连字符＆LT; code取代;数据的另一个-Key与LT; / code基（也支持jQuery中1.6+））;    返回false;
}）;$（'＃changeData'）点击（）。
 

---

旧演示

---

原来的答复

有关此HTML：

 ＆LT; D​​IV ID =foo的数据帮助文件=酒吧＆GT;＆LT; / DIV＆GT;
＆LT; A HREF =＃ID =changeData＆GT;改变数据值LT; / A＆GT;
 

和该JavaScript（用jQuery 1.6.2）

 的console.log（$（'＃富'）的数据（'帮助文件'））;$（'＃changeData'）。点击（函数（）{
    $（'＃富'）的数据（帮助文件，测试123'）。
// $（'＃富'）ATTR（'数据帮助文件，测试123'）。
    的console.log（$（'＃富'）的数据（数据帮助文件'））;
    返回false;
}）;
 

查看演示

使用的Chrome DevTools 的控制台的视察DOM中， $（'＃富'）的数据（帮助文件，测试123'）; 在看到并不更新值的控制台的，但 $（'＃富'）ATTR（'数据帮助文件，测试123'）; 确实

I've got the following field on an MVC view:

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

In a seperate js file, I want to set the data-helptext attribute to a string value. Here's my code:

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

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

The alert() call works fine, it shows the text "Old Text" in an alert dialog. However, the call to set the data-helptext attribute to "Testing 123" does not work. "Old Text" is still the attribute's current value.

Am I using the call to data() incorrectly? I've looked this up on the web, and I can't see what I'm doing wrong.

Here's the HTML markup:

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

解决方案

It is mentioned in the .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)

This was also covered on Why don't changes to jQuery $.fn.data() update the corresponding html 5 data-* attributes?

The demo on my original answer below doesn't seem to work any more.

Updated answer

Again, from the .data() documentation

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

So for <div data-role="page"></div> the following is true $('div').data('role') === 'page'

I'm fairly sure that $('div').data('data-role') worked in the past but that doesn't seem to be the case any more. I've created a better showcase which logs to HTML rather than having to open up the Console and added an additional example of the multi-hyphen to camelCase data- attributes conversion.

Updated demo (2015-07-25)

Also see 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

---

Original answer

For this HTML:

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

and this JavaScript (with 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

Using the Chrome DevTools Console to inspect the DOM, the $('#foo').data('helptext', 'Testing 123'); does not update the value as seen in the Console but $('#foo').attr('data-helptext', 'Testing 123'); does.

这篇关于无法使用jQuery数据设置数据属性（）API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！