Question

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

的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会删除click绑定。您可以使用以下任一方法解决此问题：

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

将弹出式链接绑定在initialized回调（demo）

中

$(function() {

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

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

});

更新：哎呀，我忘了包含＆＃34; tablesorter-noSort＆＃34;的cssNoSort class name需要将其添加到您点击的元素中。演示链接已在上面更新。

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

jQuery tablesorter子元素禁用排序

1 个答案: