jQuery数据函数返回错误值

Question

我有一个输入文本，它的data 属性之一会在我的视图模型更改后立即更改（感谢 Knockout）。 绑定如下：

<input data-bind="attr:{'data-customitem': customItemId}" />

在我的视图模型中，我有一个函数可以访问输入并检索data-customitem 属性值。

第一次绑定输入时，它会获得一个 id，比如X。所以 HTML 看起来像这样：

<input data-bind="attr:{'data-customitem': customItemId}" data-customitem='X'/>

然后我的模型发生变化，并且剔除将属性值更新为Y。 HTML 现在看起来像这样：

<input data-bind="attr:{'data-customitem': customItemId}" data-customitem='Y'/>

现在的问题是：

$element.data("customitem") 返回X

$element.attr("data-orderitem") 返回Y

为什么 jQuery 数据函数返回数据属性的旧值？幕后是否有任何缓存？

Answer 1

jQuery 的data 函数和attr 函数之间存在差异。 data 函数绑定到元素（不是data 属性所必需的）。如果一个元素有data-X='val'，你可以使用both jquery 的data 函数和attr 函数来获取值：

$('el').data('X')
$('el').attr('data-X')

但是-如果您更改数据（使用data(...) 函数）- 要获取新值必须使用data 函数（此更改不会影响属性的值），反之亦然同样 - 如果您使用 attr 函数更改值 - 它不会影响 data() 函数的值。

这是一个例子：

$(function() {
  $('#btn1').click(function() {
    console.log('value using data function: ' + $('#d1').data('name1'))
    console.log('value using attr function: ' + $('#d1').attr('data-name1'))
  });
  $('#btn2').click(function() {
    $('#d1').data('name1', 'new value - using data');
  });
  $('#btn3').click(function() {
    $('#d1').attr('data-name1', 'new value - using attr');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="d1" data-name1="abc"></div>
<button id="btn1">Get Values</button><br />
<button id="btn2">Change Values using data function</button><br />
<button id="btn3">Change Values using attr function</button><br />

您所做的更改（使用data-bing="attr:{...}"）不会影响jQuery 的data 函数的值。