Question

我有一张桌子，里面有很大的单元格，其中有一些链接（确切地说是一个小按钮）。

我希望点击整个单元格以触发点击小按钮。

这是我尝试过的但是它没有用。

＆＃13;

$(document).ready(function () {
    $('td').each(function () {
        var $this = $(this);
        var $a = $this.find('a');
        if ($a) {
            $this.css('cursor', 'pointer').click(function () {
                $a.click();
            });
        }
    });
});

＆＃13;

td {
    padding: 20px;
    border: 1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
    <tr><td><a href="page">L</a></td>
        <td><a href="hello">I</a></td>
        <td><a href="duckling">N</a></td>
        <td><a href="pizza">K</a></td></tr>
</table>

＆＃13;

该样式可以应用，但单击该单元格会导致jQuery中出现Stack Overflow错误。

Answer 1

直接在td上使用点击事件处理程序：
```
$('td').click(function (event) {

});
```
在单元格中找到a元素并触发单击：
```
$(this).find('a').click();
```

如果直接点击a以阻止循环，则停止传播事件：

$('td a').click(function (event) {
  event.stopPropagation();
});

我在这里准备了一个完整的小提琴：http://jsfiddle.net/Ldp31krg/8/

$(document).ready(function () {
  // prevent the propagation of the click event on the a, to avoid a click loop
  $('td a').click(function (event) {
    event.stopPropagation();
  });

  $('td').click(function (event) {
    $(this).find('a').click();
  });
});

提示：如果您希望单元格看起来像CSS中的链接，请添加游标规则：

td {
  cursor: pointer;
}

请参阅操作：http://jsfiddle.net/Ldp31krg/2/

Answer 2

你不需要javascript来解决你的问题。

JSFiddle

尝试为a内的td元素设置填充。

td {
    border: 1px solid red;
}

a {
    width: auto;
    height: auto;
    padding: 20px;
    float: left;
}

但如果你仍然需要jQuery解决方案 - Check this JSFiddle。

如果这仍然不是您要查找的内容，请检查我的下一个解决方案是否支持href和target属性 - JSFiddle。

Answer 3

这里发生的是当你调用$ a.click（）时，由于事件传播，它也会调用td的点击事件，因此会产生无限循环。

因此，对于这种情况，您需要在td的点击事件中添加一些额外的检查，当event.target（点击事件的来源）是＆时，您应该只触发子标记的点击事件＃39; td＆＃39;，而不是＆＃39; a＆＃39;。

把我的话放在代码中：

$('td').on("click",function (ev) {
    if(ev.target.tagName ==='TD'){
       $(this).find("a").trigger("click");
    }
});

请在此处查看我的小提琴示例：http://jsfiddle.net/tLd4rkdc/
顺便说一句，我建议你使用开发人员工具（在IE / Firefox / Chrome中点击F12）或使用FireBug来调试你的javascript。如果你打开了调试控制台，你会很容易知道发生了什么。

将表格单元格重定向到<a> in it</a>

3 个答案: