Bootstrap 可点击可排序 - 排序后无法点击答案

【问题标题】：Bootstrap clickable and sortable - can not click after sortingBootstrap 可点击可排序 - 排序后无法点击
【发布时间】：2019-06-28 01:33:44
【问题描述】：

我正在使用 Bootstrap 4.2.1 和 bootstrap-table 1.13.3 来创建一个每行可排序和可点击的表。在对表格进行排序之前，每一行都是可点击的。

在对 Google 工具进行排序后显示 TR 点击事件处理程序已被删除。

点击处理程序被添加到 onload 事件处理程序中，如下所示。我应该怎么做才能防止点击事件被删除或在排序操作后恢复点击事件？

function onLoaded(){
   $(function(){
      $('.table tr[data-href]').each(function(){
         $(this).click(function(){
         document.location = $(this).attr('data-href');
        });
      })
    });
}

tr.clickable-row {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.3/bootstrap-table.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.3/bootstrap-table.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<body onload="onLoaded()">
  <wrapper class="d-flex flex-column">
      <main class="container">
          <div class="table-responsive-sm">
              <table data-toggle="table" data-sortable="true" class="table table-sm table-striped table-bordered table-hover">
                  <thead class="thead-light">
                      <tr>
                          <th data-sortable="true" scope="col">
                              For
                          </th>
                          <th data-sortable="true" scope="col">
                              Name
                          </th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr class="clickable-row" data-href="ZZZZ.html?YYYY=32">
                          <td>Paul Read</td>
                          <td>23/05/2018 13:11</td>
                      </tr>
                      <tr class="clickable-row" data-href="ZZZZ.html?YYYY=31">
                          <td>Paul Read</td>
                          <td>23/05/2018 13:09</td>
                      </tr>
                  </tbody>
              </table>
          </div>
      </main>
  </wrapper>
</body>

非常感谢保罗

【问题讨论】：

标签： twitter-bootstrap jquery-ui-sortable bootstrap-table clickable

【解决方案1】：

我已将您的代码编辑到这个小提琴中：http://jsfiddle.net/eitanmg/frmLy3q8/12/

关键是使用了内置的onClickRow事件，所以排序/搜索/过滤表格后功能仍然保留。

所做的其他修改：

我已经删除了 body 标记中的 onload="onLoaded()" 并完全删除了 onLoaded() 函数。我已将id="table" 添加到表标记中，因此可以从javascript 代码中引用它。而不是onLoaded() 函数，我使用onClickRow 事件作为：

$('#table').on('click-row.bs.table', function (row, $element, field) {
    alert("you are about to navigate to the following url: " + $element._data.href)
    document.location = $element._data.href;
});

【讨论】：

谢谢 - 真的很有用，我可能已经猜到了这个 js、bootstrap、jQuery 等的新手干杯！