jQuery。数据（）不起作用，但.attr（）
原谅我没有更具体的这个。 我有这样一个奇怪的错误。 在文档加载后，我循环一些最初有data-itemname=""元素，并使用.attr("data-itemname", "someValue")设置这些值。
问题：当我通过这些元素后来循环，如果我做elem.data().itemname ，我得到"" ，但如果我做elem.attr("data-itemname") ，我得到"someValue" 。 这就像jQuery的.data() getter只获取最初设置为包含一些值的元素，但如果它们本来是空的，然后设置，然后.data()不会稍后获取值。
我一直在试图重新创build这个错误，但一直未能。
编辑
我重新创build了这个错误！ http://jsbin.com/ihuhep/edit#javascript,html,live
此外，从上面的链接链接…
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>
在处理HTML5数据属性的.data()和.attr('data-name') ，我遇到了一个类似的“bug”。
你描述的行为不是一个错误，而是devise。
.data()调用是特殊的 – 它不仅检索HTML5数据属性，还尝试评估/parsing属性。 因此，当通过.data()检索到的属性如data-myjson='{"hello":"world"}'将在通过.attr()检索时返回一个Object ，并返回一个string。 看到jsfiddle的例子。
由于.data()执行额外的处理，因此jQuery会将属性评估的结果存储在$.cache – 毕竟，一旦数据属性被评估，对每个.data()调用重新评估都是浪费的 – 特别是因为数据variables可以包含复杂的JSONstring。
我说了所有这些说： 通过.data()检索一个属性后，由.attr('data-myvar', '')所做的任何更改将不会被随后的.data()调用看到。 在jsfiddle上testing一下。
为了避免这个问题，不要混用.data和.attr()调用。 使用一个或另一个。
那是因为这个属性的名字是data-itemname 。 你不能使用-以简写obj.attribute表示法（obj.data-itemname将被解释为“obj.data minus itemname”）。
你为什么不到处使用.data() ？
你也可以在HTML上声明默认值，这也没关系。
<span data-code="pony">text</span>
和
$("span").data("code") == "pony" // true
如果你想改变它，你只需要做
$("span").data("code", "not-a-pony");
并完全删除它，你可以调用
$("span").removeData("code");
你应该尽量避免使用.attr("data-*") ，我不知道你为什么要这么做。
您必须使用.data('itemname', 'someValue');设置数据.data('itemname', 'someValue'); 。 使用.attr()设置数据属性将不起作用： http : //jsfiddle.net/ThiefMaster/YHsKx/
但是，您可以通过在标记中使用<div data-key="value"> 来提供内联值。
这是误解的结果： data不是data-*属性的访问者 。 这不仅仅是这个。
data是元素上的jQuery数据caching的访问器。 如果存在任何存在，则该caching将从data-*属性初始化 ，但data不会写入属性，也不会在初始化后更改数据caching。
data也以各种方式按照它所发现的东西，猜测数据types，使用data-foo="1"的数字（而不是stringdata("foo")对data("foo")进行data("foo") ，或者甚至将事物parsing为JSON ：
console.log(typeof $("[data-foo]").data("foo")); console.log(typeof $("[data-bar]").data("bar"));
<div data-foo="1"></div> <div data-bar='{"answer":42}'></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
