新しい属性値の使い方は？

Question

私には1つの問題があります。私は属性を変更します

$(selector).find('img[data-photoid="' + phid + '"]').attr({"data-value1":"somevalue1", "data-value2":"somevalue2"}); 

jQueryが値を変更したことをブラウザのDOMに見ています。しかし、imgをクリックすると、jQueryは古い値を使用します。

$(document).on('click','img',function(e){ 
    e.preventDefault(); 
    var t=$(this); 
    var value1=t.data("value1"); //jQuery uses old values 
    var value2=t.data("value2"); //although I changed values 
}); 

新しい値はどのように使用できますか？

Answer 1

片方の作業に固執し、混合しないでください。attrおよびdataの方法。 dataメソッドは、最初に参照されたときにのみ属性値を取りますが、その後はそれ自身の人生を生き続けます。 jQuery documentationから：

jQuery 1.4.3のHTML5データ属性はjQueryのデータオブジェクトに自動的に取り込まれます。 [...]データ属性は初めてデータプロパティにアクセスされた後に引き出され、アクセスまたは変更されなくなります（すべてのデータ値はjQueryの内部で保存されます）。

私は現在attrを使用するコードを変更することをお勧め：

$(selector).find('img[data-photoid="' + phid + '"]') 
      .data("value1", "somevalue1") 
      .data("value2", "somevalue2"); 

あなたがHTMLの変更は表示されませんが、それはより効率的に実行されます。