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'/>

然后我的模型更改并且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函数绑定到元素（对于data属性不是必需的）。如果元素包含data-X='val'，您可以使用两个 jquery＆＃39; data函数和attr函数来获取值：

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

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

以下是一个例子：

＆＃13;

$(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');
  });
});

＆＃13;

<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 />

＆＃13;

您正在进行的更改（使用data-bing="attr:{...}"）不会影响jQuery的data功能的值。

JQuery数据函数返回错误的值

1 个答案: