数据属性已更改但未应用[重复]

Question

我有一个具有如下数据属性的跨度：

<span class="delete" data-action="enable" title="Non usare più questa anagrafica" data-toggle="tooltip" data-placement="top" >  

单击跨度时，我会寻找 data-action 属性以在后端执行我的操作，它工作正常：

$('.delete').click(function(e){
    e.preventDefault();
    var clicked = $(this);
    var toggle = $(this).children('i');
    var id = $(this).closest('div').data('value');
    var action = $(this).data('action');

如果一切正常，我想将数据操作更改为“禁用”，因为此跨度充当开/关按钮，所以我这样做：

if(action=='enable'){
    toggle.removeClass('fa-toggle-off text-red').addClass('fa-toggle-on text-green');
    toggle.parent('span').data('action','disable');
    toggle.parent('span').attr('data-original-title','Non usare più questa anagrafica');
}else{
    toggle.removeClass('fa-toggle-on text-green').addClass('fa-toggle-off text-red');
    toggle.parent('span').attr('data-action','enable');
    toggle.parent('span').attr('data-original-title','Riattiva questa anagrafica');
}

如果我检查页面上的元素，我会发现数据操作已正确更新。

问题是，如果我再次单击按钮，console.log(action) 仍将返回原始数据操作值而不是更新的值（即使检查元素我看到更新的值）。 我在这里想念什么？每次单击按钮时都会重新设置操作，所以我不希望它仍然是上一次迭代的值......另外，如果我有一个按钮已经在页面加载时操作“禁用”，我的代码工作正常.有什么提示吗？

Answer 1

您正在使用attr() 和data() 更新和读取数据属性。您必须使用其中一个，而不是同时使用两者，因为它们会影响不同位置的数据属性。 attr() 直接更新 DOM，而 data() 更新内存中的对象。

我建议只使用data()：

toggle.toggleClass('fa-toggle-off text-red fa-toggle-on text-green');

if (action == 'enable') {
  toggle.parent('span').data({
      'action': 'disable',
      'original-title': 'Non usare più questa anagrafica'
    });
} else {
  toggle.parent('span').data({
    'action': 'enable',
    'original-title': 'Riattiva questa anagrafica'
  });
}