Comment faire une cliquable cellule de tableau avec un Ajax.ActionLink

Question

J'ai une cellule de table que je veux que l'utilisateur puisse cliquer pour accéder à une action AJAX, j'ai donc quelque chose comme

<td class="code-cell"> 
@Ajax.ActionLink(Model.Code, "Edit", "MyController", 
        new { id = Model.Id }, 
        new AjaxOptions 
         { 
          HttpMethod = "GET", 
          UpdateTargetId = "edit", 
          InsertionMode=InsertionMode.Replace 
         }, new { @class = "code-link" }) 
</td> 

qui met un lien dans la cellule du tableau.

Mais je veux que l'utilisateur puisse cliquer sur la cellule plutôt que d'avoir à cliquer sur le lien. Utilisation de jquery Je peux câbler un gestionnaire d'événements au clic sur le td (via une classe), puis trouver le lien enfant et cliquer dessus. Mais je vais avoir des problèmes avec la propagation des événements de compréhension, etc.

J'ai ceci:

<script type="text/javascript"> 
    $(function() { 
     $(".code-cell").click(function (e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      $("a", this).triggerHandler("click"); 
     }); 
    }); 
</script> 

Même si j'ai essayé les appels à e.preventDefault() et e.stopPropagation() (et diverses combinaisons!) Je n'arrive pas à faire marcher ça.

Quelle est la bonne façon de procéder?

Answer 1

Avez-vous essayé:

return false; 

Hope it helps

Answer 2

Une autre façon d'aborder cela sans javascript pourrait être pour régler l'affichage de bloquer pour css le lien d'action. Cela signifie que le lien d'action occupera 100% de la largeur de la cellule du tableau, donnant ainsi une plus grande surface à cliquer pour l'utilisateur.

Quelque chose à noter - si votre td a un rembourrage alors Theres va être un espace où le rembourrage i.e. existe entre le td et un éléments.

Ainsi, votre CSS pourrait ressembler à ceci

td .a 
{ 
    display: block; 
} 

ou depuis que vous avez une classe

a.code-link 
{ 
    display: block; 
}