jQuery UI ordenable y vivo() haga clic en problema - necesito hacer clic dos veces después de ordenar para hacer clic para registrarme

Question

Tengo una tabla en la que estoy usando el "sortable" de jQuery UI. En la tabla, tengo filas consistentes en un "controlador de arrastre" para agarrar y reordenar la tabla, y células con elementos interactivos, como esto:

<table id="test-table"> 
    <tbody> 
    <tr> 
     <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td> 
     <td class="clickycell"><a href="#">Testing 1</a></td> 
    </tr> 
    <tr> 
     <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td> 
     <td class="clickycell"><a href="#">Testing 2</a></td></td> 
    <tr> 
     <td class="handle"><div class="ui-icon ui-icon-arrowthick-2-n-s" /></td> 
     <td class="clickycell"><a href="#">Testing 3</a></td></td> 
    </tr> 
    </tbody> 
</table> 

En mi código, hacer que la tabla ordenable, y también utilizar jQuery vivo() para enlazar un evento de clic a los elementos interactivos, como esto:

$(function() { 
    /* 
     Using live() because in my real code table rows are dynamically added. 
     However, if I use click() instead, as in the commented-out code, it works 
     fine, without any need to click twice. 

    */ 
    // $(".clickycell a").click(function() { 
    $(".clickycell a").live('click', function() { 
     alert("Successful click"); 
     return false; 
    }); 
    $("#test-table tbody").sortable({ 
     handle: "td.handle", /* Use the draggy handle to move, not the whole row */ 
     cursor: "move" 
    }); 
}); 

estoy usando en vivo(), ya que las filas se pueden añadir de forma dinámica a la mesa en el código real.

Mi problema es este: si hago clic en cualquiera de los elementos seleccionables antes de ordenar, funcionan bien. Sin embargo, después de que el usuario arrastra las filas para reordenarlas, tengo que hacer clic en dos veces para hacer clic y registrarme. Después de ese segundo clic, los elementos cliqueables vuelven a ser "normales", necesitan solo un clic, hasta la próxima vez que se arrastran las filas.

Si uso click() en lugar de live() - como en el código comentado - entonces un solo clic funciona bien en todo momento, pero prefiero usar live(), como dije . Y tengo curiosidad de por qué no está funcionando.

Hay a live jsFiddle example here. Intente arrastrar una fila a una posición diferente, luego haga clic en cualquiera de los enlaces "Probar ...". En Firefox, al menos, tengo que hacer clic dos veces para obtener la alerta "Clic exitoso".

¿Alguna idea?

Answer 1

Es lamentable que termine con la respuesta "It is a bug", pero a veces eso sucede. Tal vez desempolvaré mi nombre de usuario de GitHub y lo bifurcaré para ver si puedo rastrearlo y descubrir una solución.

Answer 2

Estaba teniendo el mismo problema con "en vivo" y ordenable cuando encontré su publicación (el delegado también tiene el mismo problema). Para realizar un seguimiento de la observación que hizo @Stephen al hacer clic en el control de arrastre una vez antes del controlador de clic de un elemento vinculado con trabajos en vivo sin tener que hacer clic dos veces ... He utilizado esta solución de manera exitosa. Para un truco, no lo encuentro demasiado ofensivo.

$('table.demo tbody').sortable({ 
    handle: 'td.drag', 
    stop: function(e,ui){ 
     $('td.drag', ui.item).click(); 
    } 
}); 

sólo estoy emitiendo una llamada Pulse para el manejador de arrastrar tan pronto como el arrastre es completa, y ahora otros artículos (en mi fila) que he atado con vivo no requieren hacer clic en dos veces.