How to make a table cell clickable with an Ajax.ActionLink

I have a table cell which I want the user to be able to click to go to an AJAX action, so I have something like

<td class="code-开发者_Go百科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>

which puts a link in the table cell.

But I want the user to be able to click on the cell rather than having to click the link.

Using jquery I can wire up an event handler to the click on the td (via a class) and then find the child link and click it. But I'm having trouble with understanding event propagation, etc.

I have this:

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

Even though I've tried the calls to e.preventDefault() and e.stopPropagation() (and various combinations!) I can't seem to get this to work.

What's the right way to do this?

Have you tried:

return false;

Hope it helps

Another way to tackle this without javascript could be to set the css display to block for the action link.

Doing this will mean the action link takes up 100% width within the table cell therefore giving a bigger area for the user to click.

Something to note - if your td has padding then theres going to be a gap where the padding exists i.e between the td and a elements.

So your CSS could look like this

td .a 
{
    display: block;
}

or since you have a class

a.code-link
{
    display: block;
}