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文檔這種行為的原因：

數據屬性在第一次訪問數據屬性時被提取，然后不再被訪問或變異（所有數據值然后內部存儲在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'));
});