Как сделать ячейку таблицы кликабельной с помощью 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, я могу подключить обработчик событий к щелчку на тд (через класс), а затем найдите дочернюю ссылку и щелкните по ней.Но у меня возникают проблемы с пониманием распространения событий и т. Д.

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

<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

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

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

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

Так что ваш CSS может выглядеть так

td .a 
{
    display: block;
}

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

a.code-link
{
    display: block;
}

Answer 2

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

return false;

Надеюсь, это поможет