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'可以使用都 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函數的值。