ajax调用后更新数据属性

时间:2016-09-10 11:40:05

标签: javascript php jquery ajax laravel

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

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

看我的按钮。

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

点击时

$('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的按钮更新数据付费属性。

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

2 个答案:

答案 0 :(得分:4)

data不是data-*属性的访问者,它的内容越来越少。 data管理jQuery的数据缓存,该数据缓存仅来自data-*属性的初始化。它永远不会给他们。

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

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

当然,如果您在整个代码中使用data,并且不关心实际的属性值,除了作为起点,data没问题,只是不要期望在更改数据值时更改属性值。

另一方面,如果您不需要data提供的其他功能,请使用attr

示例:

&#13;
&#13;
// 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'));
&#13;
<div id="target" data-foo="bar"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

.data和数据属性不一样。如果要更新属性,请执行以下操作:

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

        });

});