点击表格行后popover未刷新的技术问题求助

问题原因 #

Bootstrap Popover在初始化时只会计算一次content函数的返回值，之后不会自动监听选中行的变化，所以切换选中行后，Popover仍显示旧内容。

解决方案 #

需要在选中表格行或点击按钮显示Popover时，强制更新Popover的内容。以下是两种可行的实现方式：

方式1：监听Popover显示事件，实时更新内容

在初始化Popover时，绑定show.bs.popover事件，每次显示前重新计算内容：

$(document).ready(function () {
  // 表格行选中逻辑：点击行切换选中状态
  $('#tblGrid tbody tr').on('click', function() {
    $('#tblGrid tbody tr').removeClass('selected');
    $(this).addClass('selected');
  });

  // 初始化Popover
  $('#popanch').popover({
    html: true,
    content: displayProj, // 直接绑定内容生成函数
    title: '<a href="#" class="close" data-dismiss="alert">×</a>'
  })
  // 监听显示事件，实时更新内容
  .on('show.bs.popover', function() {
    $(this).data('bs.popover').config.content = displayProj();
  });
});

function displayProj() {
  var selectedRow = $('#tblGrid tbody tr.selected');
  var rows = selectedRow.find("td:eq(0)").data('value') || 0;
  
  if (rows > 0) {
    var createdby = selectedRow.find("td:eq(0)").data('creator');
    return '<div>' +
            '<div class="media-body">' +
              '<div id="popoverData">' +
                '<span class="red">Created By: </span> ' + createdby + '<br/>' +
              '</div>' +
            '</div>' +
          '</div>';
  } else {
    return '<div>' +
            '<div class="media-body">' +
              '<div id="popoverData">请选择任意项目</div>' +
            '</div>' +
          '</div>';
  }
}

方式2：点击按钮时重新初始化Popover

如果不需要保持Popover的常驻状态，也可以在点击按钮时先销毁旧Popover，再重新初始化：

$(document).ready(function () {
  // 表格行选中逻辑
  $('#tblGrid tbody tr').on('click', function() {
    $('#tblGrid tbody tr').removeClass('selected');
    $(this).addClass('selected');
  });

  // 按钮点击事件：销毁旧Popover并重新初始化
  $('#popanch').on('click', function(e) {
    e.preventDefault();
    // 销毁已存在的Popover实例
    $(this).popover('destroy');
    // 重新初始化并显示
    $(this).popover({
      html: true,
      content: displayProj,
      title: '<a href="#" class="close" data-dismiss="alert">×</a>'
    }).popover('show');
  });
});

// 内容生成函数与方式1一致
function displayProj() {
  var selectedRow = $('#tblGrid tbody tr.selected');
  var rows = selectedRow.find("td:eq(0)").data('value') || 0;
  
  if (rows > 0) {
    var createdby = selectedRow.find("td:eq(0)").data('creator');
    return '<div>' +
            '<div class="media-body">' +
              '<div id="popoverData">' +
                '<span class="red">Created By: </span> ' + createdby + '<br/>' +
              '</div>' +
            '</div>' +
          '</div>';
  } else {
    return '<div>' +
            '<div class="media-body">' +
              '<div id="popoverData">请选择任意项目</div>' +
            '</div>' +
          '</div>';
  }
}

关键说明 #

• 必须先实现表格行的选中切换逻辑（给点击的行添加selected类，移除其他行的该类），否则displayProj函数无法正确获取选中行数据。
• 通过show.bs.popover事件或重新初始化的方式，确保每次显示Popover时都调用displayProj获取最新选中行的数据。

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