jQuery .data()不起作用，但是.attr()起作用 [英] jQuery .data() does not work, but .attr() does
问题描述
请原谅我没有对此做更多具体说明.我有一个奇怪的错误.在文档加载后，我循环了一些最初具有data-itemname=""的元素，并使用.attr("data-itemname", "someValue")设置了这些值.
Forgive me for not being more specific on this. I have such a strange bug. After the doc loads, I loop some elements that originally have data-itemname="", and I set those values using .attr("data-itemname", "someValue").
问题:当我以后循环通过那些元素时，如果我执行elem.data().itemname，则得到""，但是如果我执行elem.attr("data-itemname")，则得到"someValue".就像jQuery的.data() getter只获取最初设置为包含某些值的元素，但是如果它们最初为空，然后又被设置，则.data()以后不会获取该值.
Issue: When I later loop thru those elements, if I do elem.data().itemname, I get "", but if I do elem.attr("data-itemname"), I get "someValue". It's like jQuery's .data() getter only gets elements that are set initially to contain some value, but if they are originally empty, and later set, then .data() doesn't get the value later on.
我一直在尝试重新创建此错误，但未能成功.
I've been trying to recreate this bug but have not been able to.
修改
我已经重新创建了错误！ http://jsbin.com/ihuhep/edit#javascript,html,live
I have recreated the bug! http://jsbin.com/ihuhep/edit#javascript,html,live
此外，链接上方的摘录...
Also, snippets from above link...
JS:
var theaters = [
{ name: "theater A", theaterId: 5 },
{ name: "theater B", theaterId: 17 }
];
$("#theaters").html(
$("#theaterTmpl").render(theaters)
);
// DOES NOT WORK - .data("name", "val") does NOT set the val
var theaterA = $("[data-theaterid='5']");
theaterA.find(".someLink").data("tofilllater", "theater5link"); // this does NOT set data-tofilllater
$(".someLink[data-tofilllater='theater5link']").html("changed link text"); // never gets changed
// WORKS - .attr("data-name", "val") DOES set val
var theaterB = $("[data-theaterid='17']");
theaterB.find(".someLink").attr("data-tofilllater", "theater17link"); // this does set data-tofilllater
$(".someLink[data-tofilllater='theater17link']").html("changed link text");
HTML:
<body>
<div id="theaters"></div>
</body>
<script id="theaterTmpl" type="text/x-jquery-tmpl">
<div class="theater" data-theaterid="{{=theaterId}}">
<h2>{{=name}}</h2>
<a href="#" class="someLink" data-tofilllater="">need to change this text</a>
</div>
</script>
推荐答案
几天前，当使用.data()和.attr('data-name')获取HTML5数据属性时，我遇到了类似的错误".
I ran into a similar "bug" a few days ago when working with .data() and .attr('data-name') for HTML5 data attributes.
您描述的行为不是错误，而是设计使然.
The behavior you're describing is not a bug, but is by design.
.data()调用非常特殊-它不仅检索HTML5数据属性，而且还尝试评估/解析该属性.因此，使用类似data-myjson='{"hello":"world"}'的属性时，通过.data()检索时将返回Object，而通过.attr()检索时将返回字符串. 请参阅jsfiddle示例.
The .data() call is special - not only does it retrieve HTML5 data attributes it also attempts to evaluate/parse the attributes. So with an attribute like data-myjson='{"hello":"world"}' when retrieved via .data() will return an Object while retrieval via .attr() will return a string. See jsfiddle example.
由于.data()进行了额外的处理，因此jQuery将属性评估的结果存储在$.cache中-毕竟，一旦对数据属性进行了评估，那么在每个.data()调用中重新评估就很浪费了-特别是因为数据变量可以包含复杂的JSON字符串.
Since .data() does extra processing jQuery stores the results of attribute evaluation in $.cache - after all, once a data attribute has been evaluated it would be wasteful to re-evaluate on every .data() call - especially since data variables can contain complex JSON strings.
我说的所有都是这样:通过.data()检索属性后，.attr('data-myvar', '')所做的任何更改都不会在随后的.data()调用中看到. http://jsfiddle.net/PKwdr/"rel =" noreferrer>在jsfiddle上进行测试.
I said all that to say the following: After retrieving an attribute via .data() any changes made by .attr('data-myvar', '') will not be seen by subsequent .data() calls. Test this out on jsfiddle.
为避免出现此问题，请勿混用.data和.attr()呼叫.使用一个或另一个.
To avoid this problem don't intermix .data and .attr() calls. Use one or the other.
这篇关于jQuery .data()不起作用，但是.attr()起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
