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 docs：

数据属性第一次被拉入数据属性访问，然后不再访问或变异（所有数据值然后在内部存储在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'));
});

Answer 2

工作演示 http://jsfiddle.net/DDv8U/

API：http://api.jquery.com/data/ - 尝试使用此$(div).data('name', ' - Testing 2');

休息符合需要:)

<强>码

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

jQuery不返回新的数据属性

2 个答案: