title: How to make a table cell clickable with an Ajax.ActionLink
body: <p>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</p>
  
  <pre><code>&lt;td class="code-cell"&gt;
  @Ajax.ActionLink(Model.Code, "Edit", "MyController",
                      new { id = Model.Id }, 
                      new AjaxOptions
                          {
                              HttpMethod = "GET", 
                              UpdateTargetId = "edit", 
                              InsertionMode=InsertionMode.Replace
                          }, new { @class = "code-link" })
  &lt;/td&gt;
  </code></pre>
  
  <p>which puts a link in the table cell.</p>
  
  <p>But I want the user to be able to click on the cell rather than having to click the link.</p>
  
  <p>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.</p>
  
  <p>I have this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $(".code-cell").click(function (e) {
              e.preventDefault();
              e.stopPropagation();
              $("a", this).triggerHandler("click");
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>What's the right way to do this?</p>