Tablesorter: can not click pulldown in header

Question

In the head I have a static pulldown than when changed reloads the page with the data in the column selected in the pulldown. If I turn on tablesorter, clicking sorts the table but renders the pulldown inaccessible. I have done the ccs to show the arrows, so I can click next to the pulldown to sort.

So what I want to achieve is: Clicking next to the pulldown in the head tag should sort the table. Clicking the pulldown enables the pulldown (and does the reload).

PS jquery version 1.7.1 (can't update!)

The basic code:

<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>

... which is not working. Based on the suggesting below I now am a step closer as now it stops sorting when clicking on the pulldown, but it is still not opening it.

Answer 1

Use the following code... bind to "mouseup" and prevent propagation to stop the click from sorting the column (demo):

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