jQuery div onclick 单击 div 内的 href
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1615497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery div onclick to click an href inside the div
提问by Al.
I have the following HTML:
我有以下 HTML：
<table class="products">
<tr>
<td>Product description probably goes here</td>
<td><a href="#">more information</a></td>
</tr>
</table>
To make it a bit sexier for Javascript-enabled browsers I've added this jQuery (1.3.2):
为了让支持 Javascript 的浏览器更性感，我添加了这个 jQuery (1.3.2)：
$(document).ready(function(){
$('table.products tr').click(function(){
$(this).find('a').click();
return false;
});
});
But I think it gets into an infinite loop or something. Safari shows this:
但我认为它进入了一个无限循环或什么的。Safari 显示：
RangeError: Maximum call stack size exceeded. jquery.min.js:12
RangeError: 超出最大调用堆栈大小。jquery.min.js:12
Can anyone please offer a workaround or better way?
任何人都可以提供解决方法或更好的方法吗？
回答by Stefan Kendall
The problem here is that a lies within the tr. Ergo, when the a click() method is triggered, the event bubbles to the tr containing it, creating the recursive loop you mentioned. Rather than call .find('a').click(), have both aand truse the same click method.
这里的问题是 a 位于 tr 内。因此，当 a click() 方法被触发时，事件会冒泡到包含它的 tr，从而创建您提到的递归循环。而不是 call .find('a').click()，拥有两者a并tr使用相同的 click 方法。
$('tr, a').click(function(){
//dostuff
return false;
});
回答by yannickoo
I had the same problem and I solved it with adding e.stopPropagation();to the a on click:
我遇到了同样的问题，我通过添加e.stopPropagation();到 a 来解决它：
$(document).ready(function() {
$('table.products tr').bind('click', function() {
$(this).find('a').click();
return false;
});
$('table.products tr a').bind('click', function(e) {
e.stopPropagation();
});
});
回答by de Raad
This is a pretty late answer, but I found this to be a very short and simple solution:
这是一个很晚的答案，但我发现这是一个非常简短的解决方案：
$('ul li').bind('click', function() {
location = $(this).find('a').attr('href');
});
回答by Vojtech Bulant
Simply try to use bind('click')instead of click()shortcut, it worked for me in almost same case.
只需尝试使用bind('click')而不是click()快捷方式，它在几乎相同的情况下对我有用。
回答by Shawn
First, I would console.log($(this).find('a'))and make sure it is the appropriate link.
Next, I believe the click event is not what you want on the aelement. I think you just want: var a = $(this).find('a'); if (a) document.location.href = a.attr('href');
首先，我会console.log($(this).find('a'))并确保它是适当的链接。接下来，我相信点击事件不是你想要的a元素。我想你只是想要：var a = $(this).find('a'); if (a) document.location.href = a.attr('href');
My JavaScript is pretty weak though : )
不过我的 JavaScript 很弱:)
回答by Brad
mine was a list item in a dropdown so i wanted the event to keep bubbling so the dropdown would be closed. this is the solution i used:
我的是下拉列表中的列表项，所以我希望事件继续冒泡，以便关闭下拉列表。这是我使用的解决方案：
$('div#outer').click(function (e) {
if (e.target == e.currentTarget) // prevents bubbled events from triggering
$($(e.currentTarget).children()[0]).trigger('click');
});
回答by andres descalzo
$(document).ready(function(){
$('table.products tr').click(function(e){
e.stoPropagation(); // for stop the click action (event)
$(this).find('a').click();
return false;
});
});
