Как сделать ячейки таблицы кликабельным с Ajax.ActionLink

Question

У меня есть ячейка таблицы, которую я хочу, чтобы пользователь смог нажать, чтобы перейти к действию AJAX, так что у меня есть что-то вроде

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

который помещает ссылку в ячейку таблицы.

Но я хочу, чтобы пользователь мог нажать на ячейку, а не нажимать на ссылку.

Использование jquery Я могу подключить обработчик событий к клику на td (через класс), а затем найти дочернюю ссылку и щелкнуть по ней. Но у меня возникают проблемы с распространением событий понимание и т.д.

У меня есть это:

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

Несмотря на то, что я пробовал вызовы e.preventDefault() и e.stopPropagation() (и различные комбинации!) Я не могу заставить это работать.

Каков правильный способ сделать это?

Answer 1

Вы пробовали:

return false; 

Надеется, что это помогает

Answer 2

Другим способу решения этого без JavaScript может быть установлен дисплей CSS, чтобы заблокировать для связи действий.

Выполнение этого будет означать, что ссылка действия занимает 100% ширину внутри ячейки таблицы, что дает большую площадь для щелчка пользователя.

Что-то отметить - если ваш тд имеет отступы, то Theres будет зазор, где прокладка существует т.е. между тд и через элементов.

Таким образом, ваш CSS может выглядеть следующим образом

td .a 
{ 
    display: block; 
} 

или поскольку у вас есть класс

a.code-link 
{ 
    display: block; 
}