jQuery动态添加表头隐藏列按钮失效问题求助

问题根源 #

核心问题在于事件绑定时机：页面初始化时，jQuery仅给当时已存在的.hide-column按钮绑定点击事件，但通过#btn动态生成的按钮是在初始化后才创建的，因此没有被绑定事件。同时，动态添加的按钮也未初始化tooltip提示效果。

解决方案 #

采用事件委托绑定点击事件（让父元素监听子元素的点击，包括后续动态生成的子元素），同时在动态添加按钮后重新初始化tooltip，还要避免重复添加按钮。

以下是修改后的完整代码：

JavaScript

$(document).ready(function(){
  $("#btn").click(function(){
    // 仅为未添加隐藏按钮的表头添加元素，避免重复生成
    $("th:not(:has(.hide-column))").append('<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">H</button>' );
    // 重新初始化tooltip，让新添加的按钮生效
    $('[data-toggle="tooltip"]').tooltip({
      trigger: 'hover'
    });
  });
});

$(function() {
  // 初始化已标记为隐藏的列
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // 用事件委托绑定点击事件，支持动态生成的元素
  $(document).on('click', '.hide-column', HideColumnIndex);

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    var colIndex = $cell[0].cellIndex + 1;

    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    $table.find(".footer-restore-columns").show();
  }

  // 恢复所有隐藏列
  $(".restore-columns").click(function(e) {
    e.preventDefault(); // 阻止a标签默认跳转行为
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide();
    $table.find("th, td")
      .removeClass('hide-col');
  });

  // 初始化页面已存在元素的tooltip
  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  });
})

CSS

body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}

.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style></style>
</head>
<body>

<button id="btn">Hide Columns option</button>

<table class="table table-condensed table-hover table-bordered table-striped table-hideable">
  <thead>
    <tr>
      <th>Controller</th>
      <th>
        Action
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          x  
        </button>
      </th>
      <th>Type</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>
    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>
    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
    </tr>
  </tbody>
  <tfoot class="footer-restore-columns" style="display:none;">
    <tr>
      <th colspan="3"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
    </tr>
  </tfoot>
</table>

</body>
</html>

关键修改说明 #

1. 事件委托：替换直接绑定为$(document).on('click', '.hide-column', HideColumnIndex)，确保动态生成的按钮也能触发点击事件。
2. 避免重复添加：使用th:not(:has(.hide-column))选择器，仅为无按钮的表头添加元素。
3. tooltip初始化：动态添加按钮后重新调用tooltip初始化方法，让新按钮的提示功能生效。
4. 细节修复：给恢复按钮添加e.preventDefault()阻止默认跳转，修正tfoot的colspan为3（匹配表格列数），初始化时隐藏恢复栏。

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