jQuery表sorting子元素禁用排序

Question

我在th中有弹出窗口的子元素。当我单击.show_history div以显示弹出的div .show_history_ctn时，将触发对该列的排序。我已经将.show_history的z索引提高到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删除的，因为它重新构建了表头。您可以使用下列任何一种方法来解决此问题：

• 将headerTemplate选项设置为空字符串("") --这样可以防止更改标头内容，因此不会中断任何绑定。在内部，它使用一个innerHTML (可能很快就会改变)来包装内容，因为jQuery的包装在较旧版本的IE中非常慢。
• 绑定initialized回调(演示)中的弹出链接 $(函数(){函数bindLink() {$(‘.link’).click(函数(E){ e.preventDefault()；e.stopPropagation()；})；} $('table').tablesorter({主题：‘蓝色’，初始化: bindLink })；}；

更新:哎呀，我忘了包含“tablesorter”的类名，它需要添加到要单击的元素中。以上更新的演示链接。

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