jQuery Datatable单元格点击弹窗值绑定失败及首次不显示求助

我看了你的问题，主要有两个痛点：首次点击TD时Popover不显示，以及无法把TD的值绑定到Popover里的文本框。结合DataTable动态渲染行的特性，咱们可以这样调整代码来解决：

核心问题分析 #

1. 首次点击不显示：DataTable的行是动态生成的，直接给td绑定事件可能会失效，而且Popover初始化时机不对，首次点击时还没完成初始化。
2. 值无法绑定：原来的代码可能只在初始化时设置了一次文本框的值，没有在每次点击TD时更新内容。

修正后的代码实现 #

<table id="example" class="display" width="100%"></table>

<!-- Popover模板（可以放在页面任意位置） -->
<div id="popover-content" style="display:none">
  <input type="text" id="txtValue" class="form-control" />
  <button type="button" class="btn btn-sm btn-primary mt-2">保存</button>
</div>

$(document).ready(function() {
  // 初始化DataTable
  var table = $('#example').DataTable({
    data: [
      ["Tiger Nixon", "System Architect", "Edinburgh", "5421"],
      ["Garrett Winters", "Accountant", "Tokyo", "8422"],
      ["Ashton Cox", "Junior Technical Author", "San Francisco", "1562"],
      ["Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224"]
    ],
    columns: [
      { title: "Name" },
      { title: "Position" },
      { title: "Office" },
      { title: "Extn." }
    ]
  });

  // 用事件委托绑定TD的点击事件（适配动态生成的行）
  $(document).on('click', '#example td', function() {
    var $this = $(this);
    var tdValue = $this.text().trim(); // 获取当前TD的文本值

    // 初始化Popover（只初始化一次）
    if (!$this.data('bs.popover')) {
      $this.popover({
        html: true,
        content: function() {
          return $('#popover-content').html();
        },
        placement: 'top',
        trigger: 'manual' // 手动控制显示/隐藏
      });
    }

    // 显示Popover前，把TD的值绑定到文本框
    $this.popover('show');
    // 因为Popover是动态生成的，所以要通过当前Popover的容器找到文本框
    $this.next('.popover').find('#txtValue').val(tdValue);
  });

  // 点击页面其他区域隐藏Popover
  $(document).on('click', function(e) {
    if (!$(e.target).closest('#example td, .popover').length) {
      $('#example td').popover('hide');
    }
  });
});

关键调整点解释 #

• 事件委托：用$(document).on('click', '#example td', ...)替代直接绑定，确保动态生成的TD也能触发点击事件。
• 手动控制Popover：设置trigger: 'manual'，避免默认触发逻辑的冲突，完全由点击事件控制显示。
• 动态赋值：在Popover显示后，通过$this.next('.popover').find('#txtValue').val(tdValue)把当前TD的值设置到文本框里，确保每次点击都能更新内容。
• 初始化判断：用$this.data('bs.popover')判断当前TD是否已经初始化过Popover，避免重复初始化导致的问题。

这样调整后，首次点击TD就能正常弹出Popover，并且文本框会自动填入当前TD的内容啦。

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