{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 怪性笑人. 的问题《jQuery .data() does not work, but .attr() does》','https://www.manongdao.com/q-14335.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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").
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.
Edit
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>
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.
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 likedata-myjson='{"hello":"world"}'when retrieved via.data()will return anObjectwhile retrieval via.attr()will return a string. See jsfiddle example.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.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.To avoid this problem don't intermix
.dataand.attr()calls. Use one or the other.Why don't you just use
.data()everywhere?You can also declare default values inline on the HTML, which is fine too.
and
if you want to change it you just do
and to remove it altogether you could invoke
you should really try and avoid using
.attr("data-*"), I don't know why you'd want to do so anyways..attr("data-itemname", "someValue")modifies the DOM..data("itemname", "someValue")modifies the jQuery cache.To get this working in following Javascript and in addition in CSS you have to set both.
This is the result of a misunderstanding:
datais NOT an accessor fordata-*attributes. It's both more and less than that.datais an accessor for jQuery's data cache on the element. That cache is initialized fromdata-*attributes if there are any present, butdatanever writes to the attributes, nor does changing the attribute change the data cache after initialization.dataalso massages what it finds in various ways, guessing at data types, makingdata("foo")on an element withdata-foo="1"a number, not a string, or even parsing things as JSON if they look right:If you want to use the attributes (both reading and setting them), use
attr, notdata.attris an accessor for attributes.That's because the attribute's name is
data-itemname. You cannot use-in the shorthandobj.attributenotation (obj.data-itemname would be intepreted as "obj.data minus itemname").You must set the data using
.data('itemname', 'someValue');. Using.attr()to set data attributes won't work: http://jsfiddle.net/ThiefMaster/YHsKx/However, you can provide inline values by using e.g.
<div data-key="value">in the markup.