jquery动态更改的button的data-action的值，再次点击button获取不到新的data-action值

Question

我设计的一个停启用用户的功能，点击一下启用按钮后,ajax提交数据，获得返回正确的指令后，动态将启用按钮改为停用按钮，相应的原先data-action=on的属性也变成data-action=off，但是在不刷新页面的情况下再点击停用按钮，却是执行的data-action=on的命令。

代码如下：

$("table").on('click', '.ban', function() {
  var button = $(this);
  var action = button.data('action');
  var uid = button.data('uid');
  if (action == 'on') {
    var button_str1 = '启用';
    var button_class1 = 'btn-info';
    var button_str2 = '停用';
    var button_class2 = 'btn-danger';
    var data_action = 'off';
    var ban = 0;
  } else if (action == 'off') {
    var button_str1 = '停用';
    var button_class1 = 'btn-danger';
    var button_str2 = '启用';
    var button_class2 = 'btn-info';
    var data_action = 'on';
    var ban = 1;
  } else {
    return;
  }
  $.ajax({
    url: 'data.php?action=ban-user',
    type: 'POST',
    dataType: 'json',
    data: {
      ban: ban,
      uid: uid
    },
    beforeSend: function() {
      $(button).attr('disabled', true).removeClass('btn-danger').addClass('btn-info').html('<i class="fa fa-circle-o-notch fa-spin"></i> 正在'+button_str1);
    },
    success: function(res) {
      if (res.success == 1) { //成功
        $(button).removeAttr('disabled').removeClass('btn-info').addClass(button_class2).text(button_str2).attr('data-action', data_action);
      } else { //失败
        $(button).removeAttr('disabled').removeClass('btn-info').addClass('btn-warning').text('失败');
        setTimeout(function(){
          $(button).removeAttr('disabled').removeClass('btn-info btn-warning').addClass(button_class1).text(button_str1);
        },500);
      }
    },
    error: function() {
      $(button).removeAttr('disabled').removeClass('btn-info').addClass('btn-warning').text('失败');
      setTimeout(function(){
        $(button).removeAttr('disabled').removeClass('btn-info btn-warning').addClass(button_class1).text(button_str1);
      },500);
    }
  });
});

求解大神是哪里出了问题。
谢谢！

Answer 1

点击之后你就没有处理data('action')好吧