ajax呼び出し後のデータ属性の更新

Question

私は、いくつかのジョブをリストしたページを持っています。各ジョブには支払いのためのボタンがあり、ボタンには支払われているかどうかの値を含むデータ支払い属性があります。

ボタンをクリックすると、支払いを更新するリクエストを私のルートに送信し、支払いの有無にかかわらずステータスを返します。

マイボタンを参照してください。

<button data-id="{{ $r->id }}" data-paid="{{ $r->paid }}" class="btn btn-success btn-sm paid">Paid</button> 

支払われていない場合、それは私が反対のデータ支払っ属性を更新したい0

を返し、ルート返します1を支払った場合は、コンソールを見ると

$('button.paid').on('click', function() { 

     var job = this; 
     var id = $(this).data("id"); 

     $.get('/round/job/' + id + '/paid', function(data){ 

       $(job).data('paid',data.jh.paid); 

       console.log(data.jh.paid); 

     }); 

}); 

をクリック1または0の値を持つボタン。

私は機能すると思っていましたが、ページが読み込まれたときに値に残る値は更新されません。

Answer 1

dataがdata-*属性のアクセサではありません、それはより多くの、それ未満の両方です。 dataは、要素のjQueryのデータキャッシュを管理します。は、data-*属性ので初期化されています。決してはと書いてありません。

が実際にattrを使用して、属性値を変更するには、いないデータ：もちろん

$(job).attr("data-paid", dta.jh.paid); 

、あなたのコード全体dataを使用し、出発点として以外に実際の属性値を気にしない場合、dataは問題ありません。データ値を変更したときに属性値が変更されるとは思わないでください。

追加の機能が必要ない場合はdataが提供されます。ちょうどattrを使用してください。

例：勤務

// Get the element 
 
var t = $("#target"); 
 

 
// See what its data value for "foo" is 
 
console.log("Before: t.data('foo') = " + t.data('foo')); 
 

 
// See what its *attribute* is 
 
console.log("Before: t.attr('data-foo') = " + t.attr('data-foo')); 
 

 
// Change it 
 
t.data('foo', 'updated'); 
 

 
// See what its data value for "foo" is again 
 
console.log("After: t.data('foo') = " + t.data('foo')); 
 

 
// See what its *attribute* is again: 
 
console.log("After: t.attr('data-foo') = " + t.attr('data-foo'));

<div id="target" data-foo="bar"></div> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

。データとデータ属性は同じではありません。あなたは属性を更新したい場合は次の操作を行います。

$('button.paid').on('click', function() { 

     var job = this; 
     var id = $(this).data("id"); 

     $.get('/round/job/' + id + '/paid', function(data){ 

       $(job).attr('data-paid', data.jh.paid); 

       console.log(data.jh.paid); 

     }); 

});