jQuery UI triable et live() cliquez sur le problème - besoin de cliquer deux fois après le tri pour cliquer pour enregistrer

Question

J'ai une table J'utilise jQuery UI "sortable" sur. Dans le tableau, j'ai des lignes constituées d'une « poignée de déplacement » pour saisir et réorganiser la table, et les cellules avec des éléments cliquables, comme ceci:

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

Dans mon code, je fais la table sortable, et utiliser aussi en direct() de jQuery pour lier un événement de clic pour les éléments cliquables, comme ceci:

$(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" 
    }); 
}); 

J'utilise en direct() parce que les lignes peuvent être ajoutées dynamiquement à la table dans le code réel.

Mon problème est le suivant: si je clique sur l'un des éléments cliquables avant le tri, ils fonctionnent correctement. Après que l'utilisateur traîne les lignes pour les réorganiser, cependant, je dois cliquer deux fois pour un clic pour enregistrer. Après ce second clic, les éléments cliquables reviennent à "normal", ne nécessitant qu'un clic, jusqu'à la prochaine fois que les lignes sont déplacées. Si j'utilise click() plutôt que live() - comme dans le code commenté - alors un simple clic fonctionne bien à tout moment, mais je préfère utiliser live(), comme je l'ai dit . Et je suis curieux de savoir pourquoi ça ne marche pas. Il y a a live jsFiddle example here. Essayez de faire glisser une ligne dans une position différente, puis cliquez sur l'un des liens "Testing ...". Dans Firefox, au moins, je dois cliquer deux fois pour obtenir l'alerte "Clic réussi".

Des idées?

Answer 1

Il est malheureux de finir avec la réponse "It is a bug", mais je suppose que cela arrive parfois. Peut-être que je vais dépoussiérer mon login GitHub et le fourchonner pour voir si je peux le traquer et découvrir un correctif.

Answer 2

J'avais le même problème avec "live" et triable lorsque j'ai trouvé votre message (le délégué a le même problème). Pour faire suite à l'observation faite par @Stephen à propos de cliquer sur la poignée de glisser une fois avant que le gestionnaire de clic d'un objet lié avec des travaux en direct sans avoir à cliquer deux fois ... J'ai utilisé cette solution de contournement. Pour un hack, je ne le trouve pas trop offensant.

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

Je suis juste de lancer un appel de clic au gestionnaire de glisser dès que la traînée est terminée, et maintenant d'autres éléments (dans ma ligne) que je suis lié avec TOUCHER ne pas nécessaire de cliquer sur deux fois.