javascript - jQuery 不返回新的数据属性

Question

我正在尝试使用 data-attr 和 jQuery 完成一个非常简单的任务，检查这个例子:

标记:

<div data-name="Testing"></div>

JS

$(function(){
    var div = $('div');
    $(div).append($(div).data('name'));
    $(div).attr('data-name', ' -  Testing 2');
    $(div).append($(div).data('name'));
    console.log(div);
});

您可以在这里进行测试:http://jsfiddle.net/YsKJJ/16/

因此，它应该附加到 div 中正文Testing - Testing 2 , 但打印 TestingTesting .在控制台中，我检查了对象中的 attr 是否已更改，是的，具有新值 - Testing 2但是 jQuery 仍然返回原始值:(

有什么想法吗？

更新:

因此，根据 jQuery 文档，这种行为的原因是:

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).

更多信息:jQuery Data vs Attr?

Answer 1

您正在更改属性，但这不会自动更新数据。这有效:

$(function(){
    var div = $('div');
    div.append(div.data('name'));
    div.data('name', ' -  Testing 2');
    div.append(div.data('name'));
});