javascript - Tablesorter:无法单击标题中的下拉菜单

Question

在头部，我有一个静态下拉菜单，当更改时，会使用下拉菜单中选定的列中的数据重新加载页面。 如果我打开表格排序器，单击会对表格进行排序，但会导致下拉菜单无法访问。 我已经完成了 ccs 以显示箭头，因此我可以单击下拉列表旁边的按钮进行排序。

所以我想要实现的是: 单击 head 标签中下拉列表旁边的按钮即可对表格进行排序。 单击下拉菜单将启用下拉菜单(并重新加载)。

PS jquery版本1.7.1(无法更新!)

基本代码:

<style>
    table.tablesorter thead tr div span {
        padding: 0px 8px;
        cursor: pointer;
    }
</style>
<table class="tablesorter">
<thead>
   <tr>
       <th class="header">
           <div>
                <span></span>
                Kolommen:
                <select>...</select>
           </div>
       </th>
       ...
 <script>
 <!--
     $(function() {
         $("table.tablesorter").tablesorter();
         $("select").on("click", function (e) {
             e.stopPropagation();
             // do something
         });
     });
 //-->
 </script>

...这不起作用。根据下面的建议，我现在更近了一步，因为现在单击下拉菜单时它会停止排序，但它仍然没有打开它。

Answer 1

使用以下代码...绑定(bind)到“mouseup”并阻止传播以阻止单击对列进行排序 ( demo ):

$('select').on('mouseup', function (e) {
    e.stopPropagation();
    // do something
});