javascript - jQuery tablesorter 子元素禁用排序

Question

我在 th 中有子元素，它们是弹出窗口。当我单击 .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 删除了点击绑定(bind)，因为它重建了表头。您可以使用以下任一方法解决此问题:

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

• 在 initialized 回调 ( demo ) 中绑定(bind)弹出链接

  $(function() {
  
    function bindLink() {
      $('.link').click(function(e) {
        e.preventDefault();
        e.stopPropagation();
      });
    }
  
    $('table').tablesorter({
      theme: 'blue',
      initialized: bindLink
    });
  
  });
  

更新:糟糕，我忘了包含 cssNoSort class name需要将“tablesorter-noSort”添加到您单击的元素中。上面更新了演示链接。

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