아약스 호출 후 데이터 속성 업데이트하기

Question

많은 작업 목록이있는 페이지가 있고 각 작업에는 유료 버튼이 있으며 버튼에는 유료인지 아닌지 여부가 포함 된 데이터 지불 속성이 있습니다.

버튼을 클릭하면 지급 여부를 나타내는 상태와 함께 지급을 업데이트하고 성공 여부를 반환하는 요청을 내 경로로 보냅니다.

내 버튼을 참조하십시오. 그것을 지불하지 않을 경우, 경로를 반환 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); 

     }); 

}); 

콘솔을 볼 때 클릭

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

내가에 대한 데이터를 지불 속성을 업데이트 할 0

반환 1 또는 0 중 하나의 값을 가진 버튼.

나는 함수가 그렇게 할 것이라고 생각했지만, 페이지가로드 될 때 값으로 남아있는 값을 업데이트하지 않는다.

Answer 1

data이 data-* 속성에 대한 접근하지, 그것보다 모두 더 적은이다. data은 data-* 속성에서 으로 초기화 된 인 요소에 대한 jQuery의 데이터 캐시를 관리합니다. 결코 은 그들에게을 씁니다.

실제로 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); 

     }); 

});