如何使用jQuery临时禁用嵌套的onClick事件

Question

我在下面的表中使用了最后一个单元格中的链接。该表通过ajax填充数据，具体取决于用户的输入。

<table class="table-list"> 
<tbody> 
<tr> 
<td>...</td> 
<td><a href="/link">Link</a></td> 
</tr> 
</tbody> 
</table> 

因为我喜欢整行可点击，我使用以下脚本来捕获onClick事件。但链接也是在表行中，并且onClick事件被触发了无穷大时间，直到脚本因“堆栈溢出”错误而中止。

<script> 
$(function() { 
$('.table-list tr').live('click', function() { 
    $('a:last', this).click(); 
}); 
}); 
</script> 

我试着像下面暂时禁用事件，但它不工作。

<script> 
$(function() { 
$('.table-list tr').live('click', function() { 
    $(this).off('click'); 
    $('a:last', this).click(); 
    $(this).on('click'); 
}); 
}); 
</script> 

我也试着像addind一些变化和消除类isClicked到行等，但没有奏效。

对此有何建议？

Answer 1

试试这个：

$(function() { 
    $('.table-list').on('click', 'tr', function(){ 
    $(this).find('a:last').trigger('click'); 
    }); 

    $('.table-list').on('click','a',function(e){ 
    e.stopImmediatePropagation(); 
    }); 
}); 

Answer 2

不要试图点击链接，try this:

<table class="table-list"> 
<tbody> 
<tr style='border: 1px solid black;'> 
<td>.1.</td><td>.2.</td><td>.3.</td><td>.4.</td><td>.5.</td> 
<td class='link'><a href="/link" target="_blank">Link</a></td> 
</tr> 
<tr style='border: 1px solid black;'> 
<td>.1.</td><td>.2.</td><td>.3.</td><td>.4.</td><td>.5.</td> 
<td class='link'><a href="/link">Link2</a></td> 
</tr> 
</tbody> 
</table>​ 

脚本：

$('.table-list td').each(function(){ 
     if ($(this).find('a').length === 0){ 
      $(this).on('click', function(){ 
       var link = $(this).siblings('.link').find('a'); 
       if (link.attr('target') === '_blank'){ 
        window.open(link.attr('href')); 
       } 
       else { 
        window.location = link.attr('href')    
       } 
      }); 
     } 
    }); 

它的丑陋，并可以缩短，但它的比提交恕我直言的形式更好。
如果您想让其他tds可点击考虑只是用链接包装整个行。

Answer 3

防止事件传播是重要的，例如，冒泡。

我张贴一些示例代码在这里：http://pastebin.com/d25QeVkK

这是JS/jQuery的一部分：

(function($){ 
    $(document).delegate('table tr', 'click', function(e){ 
     $('a', this).trigger('click'); 
    }); 
    $(document).delegate('tr a', 'click', function(e){ 
     console.log("it works!"); 
     // use either of these to prevent stackoverflow 
     //e.stopPropagation(); // use this if you want normal click behaviour without bubbling 
     return false; // use this if you don't want normal click behaviour and no propagation 
    });        
})(jQuery); 

因此，这是不是最聪明的解决方案，因为它实际上不会因为工作方式委托的作品。如果使用委托，点击必须鼓泡到body元素才能工作 - stopPropagate可以防止这种情况发生。这应该做的伎俩：

$('body').delegate('.table-list tr', 'click', function(e){ 
     $('a', this).trigger('click'); 
}); 
$('body').delegate('.table-list tr a', 'click', function(e){ 
     e.stopPropagation(); 
     window.location.href = $(this).attr('href'); 
}); 

e.stopPropagation();有留在单击处理程序，因为否则你仍然会得到一段时间后，冷冻UI和递归警告，被重定向到目标URL之前。

http://pastebin.com/PrH96GX8

因此，这是更短，并应工作太：

$('body').delegate('.table-list tr', 'click', function(e){ 
    window.location.href = $(this).find('a').attr('href'); 
}); 

使用此新选项卡中打开：

$('body').delegate('.table-list tr', 'click', function(e){ 
    window.open($(this).find('a').attr('href'),'_newtab'); 
    return false; 
}); 

请注意使用正确的选择，这是真正的通用代码。