Question

我有以下HTML：

<table class="products">
  <tr>
    <td>Product description probably goes here</td>
    <td><a href="#">more information</a></td>
  </tr>
</table>

为了让支持Javascript的浏览器更加性感，我添加了这个jQuery（1.3.2）：

$(document).ready(function(){
  $('table.products tr').click(function(){
    $(this).find('a').click();
    return false;
  });
});

但我觉得它会陷入无限循环或其他什么。 Safari显示了这一点：

RangeError：最大调用堆栈大小超标。 jquery.min.js：12

有人可以提供解决方法或更好的方法吗？

Answer 1

这里的问题是tr中的谎言。因此，当触发click（）方法时，事件会冒泡到包含它的tr，从而创建您提到的递归循环。而不是致电.find('a').click()，a和tr都使用相同的点击方式。

$('tr, a').click(function(){
   //dostuff
   return false;
});

Answer 2

我遇到了同样的问题，我通过点击添加e.stopPropagation();解决了问题：

$(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();
  });
});

Answer 3

这是一个很晚的答案，但我发现这是一个非常简短的解决方案：

$('ul li').bind('click', function() {
    location = $(this).find('a').attr('href');
});

Answer 4

首先，我会console.log($(this).find('a'))并确保它是适当的链接。接下来，我认为点击事件不是您想要的a元素。我想你只想：var a = $(this).find('a'); if (a) document.location.href = a.attr('href');

我的JavaScript非常弱但是：）

Answer 5

我是下拉列表中的一个列表项，所以我希望事件继续冒泡，以便关闭下拉列表。这是我使用的解决方案：

$('div#outer').click(function (e) {
   if (e.target == e.currentTarget) // prevents bubbled events from triggering
      $($(e.currentTarget).children()[0]).trigger('click');
});

Answer 6

$(document).ready(function(){
  $('table.products tr').click(function(e){
    e.stoPropagation(); // for stop the click action (event)
    $(this).find('a').click();
    return false;
  });
});

jQuery div onclick单击div中的href

7 个答案: