jQuery tablesorter 子元素禁用排序

Question

我在 th 中有子元素是弹出 windows。当我单击 .show_history div 以显示弹出窗口 div .show_history_ctn 时，将触发该列的排序。我已将 .show_history 的 z-index 增加到 9999，但仍会触发排序。我还在 .show_history 单击事件中添加了 stopPropagation 并且仍然进行排序。

jQuery

$(".show_history").on("click",function(event) {
        $(this).siblings(".show_history_ctn").find("tr").show();
        event.stopPropagation();
        if($(this).hasClass("active")) {
            $(this).siblings(".show_history_ctn").slideUp();
            $(this).removeClass("active");
        } else {
            $(".show_history_ctn").hide();
            $(".show_history").removeClass("active");
            $(this).siblings(".show_history_ctn").slideDown();
            $(this).addClass("active");
        }
    });

$(".tablesorter").tablesorter();

html

<table class='tablesorter'><thead><tr><th><div class='show_history'>Show History</div><div class='show_history_ctn' style='display:none'>**content**</div></th><th></th></tr></thead></table>

我该如何解决？我需要对列进行排序，否则我只需添加 sorter:'false'.

Answer 1

问题是 tablesorter 删除了点击绑定，因为它重建了 table header。您可以使用以下任一方法解决此问题：

将 headerTemplate 选项设置为空字符串 ("") - 这可以防止更改 header 内容，因此不会破坏任何绑定。在内部，它使用 innerHTML（这可能很快就会改变）来包装内容，因为 jQuery 的包装在旧版本的 IE 中非常慢。

在 initialized 回调 (demo)

中绑定弹出窗口 links

$(function() {

  function bindLink() {
    $('.link').click(function(e) {
      e.preventDefault();
      e.stopPropagation();
    });
  }

  $('table').tablesorter({
    theme: 'blue',
    initialized: bindLink
  });

});

更新：糟糕，我忘记包含 "tablesorter-noSort" 的 cssNoSort class name，它需要添加到您点击的元素中。上面更新了演示 link。

<th>AlphaNumeric <a class="link tablesorter-noSort" href="https://google.com">test</a>

jQuery tablesorter 子元素禁用排序

jQuery tablesorter child elements th disable sorting

html

javascript

jquery

tablesorter