ajax调用后更新数据属性

我有一个页面列出了许多工作，每个工作都有一个付费按钮，按钮有一个数据付费属性，其中包含是否支付的价值。

单击该按钮时，我向我的路线发送请求，该请求更新付款并返回成功以及是否已付款。

看我的按钮。

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

点击时

 $('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。

我想要使​​用值为1或0的按钮更新数据付费属性。

我认为函数会这样做，但它不会更新页面加载时它保留的值。

Answer 1

data不是data-*属性的访问者，它的数量越来越少。 data管理jQuery的元素数据缓存，该缓存仅从data-*属性初始化 。 它从不写信给他们。

要实际更改属性值，请使用attr ，而不是数据：

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

当然，如果您在整个代码中使用data ，并且除了作为起点之外不关心实际属性值， data就可以了，只是不要指望在更改数据值时更改属性值。

另一方面，如果您不需要data提供的附加function，请使用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')); 

Answer 2

.data和data atttribute是不一样的。 如果要更新属性，请执行以下操作：

 $('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); }); });