javascript - 数据表 - 更新属性数据

Question

所以我有一个 DataTable，我想更新 td< 的最后一个 a 上的数据属性 data-paiement/。这是一个例子:

<td class="dropdown open">
    <a class="btn btn-default" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="fa fa-cog"></i></a>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="/fr/admin/evenements/inscriptions/modifier?URL=noel-des-enfants-2017&amp;id=3440">Modifier</a><br>
        <a class="dropdown-item" href="#" data-delete-inscription="3440" onclick="DeleteInscription(3440, 'DEMN')">Supprimer</a><br>
        <a class="dropdown-item btnPaiement" href="#" data-update-paiement="3440" data-paiement="1" data-acronym="DEMN">Changer le statut de paiement</a><br>
    </div>

因此，当我单击它时，我会调用 jQuery 函数并发送此数据属性:

$(document).on('click', '.btnPaiement', function () {
    console.log($(this).data('paiement'));
    ChangeStatusPaiement($(this).data('update-paiement'), $(this).data('acronym'), $(this).data('paiement'));
});

在ChangeStatusPaiement中，我像这样更新data-paiement:

$('a[data-update-paiement="' + id + '"]').attr('data-paiement', paye == 1 ? '0' : '1');

一切正常，HTML 已更新，因此 data-paiement 现在等于 0

但是，当我重新单击它时，在我的 jQuery 调用的 console.log($(this).data('paiement')); 中，data-paiment 值仍然是 1

是不是因为DataTable没有更新他的值？

谢谢!

Answer 1

访问 jQuery .data() 函数会创建一个包含元素数据属性值的内存对象。使用 jQuery .attr() 函数更改属性值只会更新属性本身，但更改不会反射(reflect)到 jQuery 处理的底层数据模型上。

在 ChangeStatusPaiment 中，您可能需要替换:

 $('a[data-update-paiement="' + id + '"]').attr('data-paiement', paye == 1 ? '0' : '1');

与:

 $('a[data-update-paiement="' + id + '"]').data('paiement', paye == 1 ? '0' : '1');

这里有一个演示:

let $tester = $('span');

$('div').append($('<p />', {text: 'Accessing data the first time: '+$tester.data('test')}));

$tester.attr('data-test', 2);

$('div').append($('<p />', {text: 'Accessing data twice (after update): '+$tester.data('test')}));

$('div').append($('<p />', {text: 'Nevertheless the attribute has been updated using attr function in the meantime: '+$tester.attr('data-test')}));

$('div').append($('<p />', {text: 'You have to modify via the data function. $("span").data("test", 2)' + ($("span").data('test', 2), '')}));

$('div').append($('<p />', {text: 'Now, accessing the value via "data function will give you the right value:' + ($tester.data('test'))}));

$('div').append($('<p />', {text: 'So use $element.data once "data" function has been called at least once for the element.'}));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span data-test="1"></span>

<div></div>