javascript - JQuery 数据函数返回错误值

Question

我有一个输入文本，一旦我的 View 模型发生更改，其data属性之一就会立即更改(感谢 Knockout)。绑定(bind)完成如下:

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

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

第一次绑定(bind)输入时，它会获得一个 id，例如 X。所以 HTML 看起来像这样:

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

然后我的模型发生更改，并且 knockout 将属性值更新为 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 函数绑定(bind)到元素(不需要绑定(bind)到 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 函数的值。