jQuery点击表格头追加active类后定时函数读取状态异常如何解决

问题根源 #

你的代码存在3个核心错误，导致无法正确读取当前激活的列信息：

1. 点击事件未声明column_name变量：你直接在ajax参数和成功回调里使用了未定义的column_name，属于隐藏风险，即使当前运行正常也随时可能出错。
2. 定时函数选择器逻辑错误：$('th.column_sort').text()会返回所有带column_sort类的表头文本拼接结果，不是仅读取带active类的那一个表头的内容，所以你拿到的一直是不符合预期的错误值。
3. 变量作用域错误：else分支中直接alert未定义的ColumnName，会抛出JS异常，可能阻塞后续刷新逻辑执行。

修复代码 #

1. 修复表头点击事件 #

补全当前点击列id的获取逻辑：

$(document).ready(function() {
  var timesClicked = 0;
  $(document).on('click', '.column_sort', function(event) {
    event.preventDefault();
    // 新增：获取当前点击列的id
    var column_name = $(this).attr('id');
    var PageNumber = $("#pagination").find("strong").html();
    $(".column_sort").removeClass("active");
    $.ajax({
      url: '<?=base_url()?>/Main/fetch_details/',
      method: "POST",
      data: {
        column_name: column_name,
        PageNumber: PageNumber
      },
      success: function(data) {
        $("#postsList tr:not(:first)").remove();
        $("#postsList2").show();
        $("#postsList2").html(data);
        $('#' + column_name).addClass('active');
        return false;
      }
    })
  });
});

2. 修复定时刷新函数 #

调整选择器，直接定位带active类的表头：

setInterval(UpdateAllListing, 10000);

function UpdateAllListing() {
  // 直接选中当前激活的排序列
  var $activeColumn = $('th.column_sort.active');
  var ColumnName = '';
  if ($activeColumn.length) {
    // 需要列id就用.attr('id')，需要列显示文本就用.text()
    ColumnName = $activeColumn.attr('id');
    alert(ColumnName);
  } else {
    // 无激活列的自定义处理逻辑
    alert('未选择排序列');
  }
  // 后续刷新数据的ajax逻辑
}

内容的提问来源于stack exchange，提问作者amit