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％的宽度，从而为用户提供更大的区域点击。

需要注意的事项 - 如果你的 td 有填充，那么这将是填充存在的间隙，即 td 和之间的元件。

所以你的CSS看起来像这样

td .a 
{
    display: block;
}

或者因为你有一个班级

a.code-link
{
    display: block;
}

如何使用Ajax.ActionLink使表格单元格可单击

2 个答案: