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

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(); 必须留在点击处理程序中，否则在重定向到目标 URL 之前，您仍然会在一段时间后收到冻结的 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 可点击，请考虑使用链接包裹整行。