Question

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

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

因为我想让整行可以点击，所以我使用以下脚本来捕获onClick事件。但是该链接也是 in 表行，onClick-Event被无限次触发，直到脚本因“stackoverflow”错误而中止。

<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

防止事件传播非常重要，例如鼓泡。

我在这里发布了一些示例代码：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和递归警告。

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

请记住使用正确的选择器，这是非常通用的代码。

Answer 2

试试这个：

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

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

Answer 3

而不是尝试点击链接，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可点击，可以考虑用链接包裹整行。

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

3 个答案: