En la cabeza tengo un menú desplegable estático que cuando se cambia vuelve a cargar la página con los datos en la columna seleccionada en el menú desplegable. Si enciendo el clasificador de tablas, hacer clic ordena la tabla pero hace que el menú desplegable sea inaccesible. He hecho los ccs para mostrar las flechas, por lo que puedo hacer clic al lado del menú desplegable para ordenar.

Entonces, lo que quiero lograr es: hacer clic al lado del menú desplegable en la etiqueta de la cabeza debería ordenar la tabla. Al hacer clic en el menú desplegable, se habilita el menú desplegable (y se vuelve a cargar).

PS jquery versión 1.7.1 (¡no se puede actualizar!)

El código básico:

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

... que no funciona. Según lo que se sugiere a continuación, ahora estoy un paso más cerca, ya que deja de ordenar al hacer clic en el menú desplegable, pero aún no lo está abriendo.

1
Dirk En Carol Rennen 2 sep. 2014 a las 14:52

2 respuestas

La mejor respuesta

Use el siguiente código ... enlace "mouseup" y evite la propagación para evitar que el clic ordene la columna (demo):

$('select').on('mouseup', function (e) {
    e.stopPropagation();
    // do something
});
0
Mottie 3 sep. 2014 a las 06:14

Esto parece funcionar:

$("select").on("mousedown click", function (e) {
    e.stopPropagation();
});
0
Dirk En Carol Rennen 3 sep. 2014 a las 10:33