正确更新HTML数据属性，但页面上未显示更改

Question

我有这个HTML：

<input type="text" id="query" data-source="whatever">

我有一些jQuery成功地更改了数据属性，即对“test”

的“改变”

$(function() {
    $('#query').data('source', 'test');
    console.log($('#query').data());
});

但如果我使用Chrome检查页面，则元素中的数据属性尚未更新..我可以在控制台中打印它，但我无法检查新值！非常困惑。有什么想法吗？

这是fiddle

Answer 1

数据不存储在元素上（使用attr或prop）。相反，jQuery将其保存在$ .cache中。

Answer 2

如果你正在做任何疯狂的事情，比如使用数据属性来应用样式（不，它并不是真的很疯狂），那么你需要jQuery的缓存和来更新DOM。

交换jQuery

$element.data(key, value);

不会将DOM更新为同时执行这两项操作的方法

var data = function($element, key, value) {
    $element.data(key, value);
    $element.attr('data-'+key, value);
}

data($element, key, value);

注意：我总是把$放在jQuery变量前面，万一有人对此感到困惑。 ;）

Answer 3

在你的小提琴中你有这个代码。

$(function() {
    $('#query') = $('#query').data('source', 'test');
    console.log($('#query').data());
});

有错误（“分配中的左侧无效”），因为$('#query')是一个函数调用，并且您正在向.data('source', 'test')发出响应。

将其更改为

$(function() {
    $('#query').data('source', 'test');
    console.log($('#query').data());
});

它会正常工作。

看看http://jsfiddle.net/r5YV9/10/

Answer 4

请参阅有关data()的Jquery文档，您将在此处看到：

  

使用data（）方法更新数据不会影响   DOM。要设置data- *属性值，请使用attr。

因此，您应该使用

$('#query').attr('data-source', 'test');

Answer 5

jQuery data()将信息存储在本地定义的函数数据中。 jQuery attr()将信息直接存储在元素中的属性中，这些属性在检查时可以公开看到。

因此，当您使用jQuery data()时，无法直接从jQuery外部访问数据，并且在检查时将看不到数据。