JQueryデータ関数が間違った値を返します

Question

ビューモデルが変更されると（ノックアウトのおかげで）すぐにそのdata属性の1つが変更される入力テキストがあります。 次のように行われているバインディング：

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

はどこか私の見解モデルでは、私は入力にアクセスし、 data-customitem属性値を取得する機能を持っています。

入力が初めてバインドされると、IDはXとなります。だから、HTMLは次のようになります。

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

その後、私のモデルチェンジとノックアウトがYに属性値を更新します。問題は今

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

：

$element.data("customitem")戻りX

$element.attr("data-orderitem")戻りY

jQueryのデータ機能は、データ属性の古い値を返しているのはなぜHTMLは次のようになります？舞台裏でどんなキャッシングが起こっていますか？

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関数の値に影響を与えません。