JQuery数据函数返回错误的值

JQuery data function returns the wrong value

本文关键字：错误 返回 数据 函数 JQuery      更新时间：2023-09-26

我有一个输入文本，它的一个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数据函数返回数据属性的旧值?在后台是否存在缓存?

jQuery的data函数和attr函数是不同的。data函数绑定到元素(不需要绑定到data属性)。如果一个元素有data-X='val'，你可以同时使用 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函数的值

相关文章：