动态变化后获取数据属性答案

【问题标题】：Getting a data attribute after dynamic change动态变化后获取数据属性
【发布时间】：2026-01-22 20:55:01
【问题描述】：

我有一个简单的设置，将属性“data-id”附加到元素：

<div class='row' data-id='1'>

如果我打电话给alert($(.row).data(id));，我会得到我的 id 1。接下来我手动或通过另一个脚本将此 id 更改为 2：

<div class='row' data-id='2'>

现在如果我打电话给alert($(.row).data(id));，我仍然会得到 1 而不是 2。

但是，如果我将方法 .data() 更改为 attr('data-id')，结果将是 2。

这种行为的原因是什么？

【问题讨论】：

【解决方案1】：

原因是因为 jQuery 将所有 data 属性键/值对存储在一个对象中，与 DOM 分开。 data() 方法从这个对象中读取数据。

当您使用attr() 更新data 属性时，您只更新了DOM，因此data() 方法从内存对象中读取旧值。

因此，最好将data() 同时用作setter 和getter。

【讨论】：

【解决方案2】：

$(.row).data('id', 'your new value')

使用上述设置方法更新您的data-id 值

当您获得$('.row').data('id') 之后，您将获得更新后的值

【讨论】：

【解决方案3】：

对于 Set 和 Get 属性，使用 data() 而不是 attr()

<div class='row' data-id='1'>

//set attr
$(.row).data("id","NEW_VAL");

//get attr
$(.row).data("id");

【讨论】：