jQuery .data（）不起作用，但.attr（）可以

原谅我没有更具体的这一点。我有这么奇怪的错误。在doc加载之后，我循环了一些原来的元素data-itemname=""，并使用它来设置这些值.attr("data-itemname", "someValue")。

问题：当我后来循环通过这些元素时，如果我这样做elem.data().itemname，我会得到""，但如果我这样做elem.attr("data-itemname")，我会得到"someValue"。这就像jQuery的.data()getter只获取最初设置为包含某些值的元素，但如果它们最初是空的，稍后设置，则稍后.data()不会获得该值。

我一直试图重新创建这个bug，但一直没能。

编辑

我重新创建了这个bug！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 valvar 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 valvar 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>

哆啦的时光机

浏览 1376回答 3

3回答

拉丁的传说

几天前，当我使用.data()和.attr('data-name')处理HTML5数据属性时，我遇到了类似的“bug” 。您描述的行为不是错误，而是设计。该.data()调用是特殊的 - 它不仅检索HTML5数据属性，还尝试评估/解析属性。因此，使用像data-myjson='{"hello":"world"}'检索到的属性.data()将返回一段Object时间检索通过.attr()将返回一个字符串。参见jsfiddle示例。因为.data()额外的处理jQuery存储了属性评估的结果$.cache- 毕竟，一旦评估了数据属性，在每次.data()调用时重新评估将是浪费- 特别是因为数据变量可以包含复杂的JSON字符串。我说了以下所有内容：通过后续调用后不会看到的任何更改检索属性后。.data().attr('data-myvar', '').data() 在jsfiddle上测试一下。为了避免这个问题，请不要混合.data和.attr()调用。使用其中一个。

繁花如伊

那是因为属性的名字是data-itemname。您不能使用-简写obj.attribute表示法（obj.data-itemname将被解释为“obj.data minus itemname”）。

随时随地看视频慕课网APP