jQuery的点击表行切换剖面

我有以下的标记（这是我无法控制的，必须保持原样，但是JavaScript可以进行操作。）jQuery的点击表行切换剖面

http://jsbin.com/uyifu3/edit

我试图完成当点击表格行时，会自动点击“在此处切换”链接。

我不断寻找我自己陷入与当前的设置递归循环。

所以表行中的任何地方点击（减去实际点击链接本身），应点击其中有用于将切换红色框中的链接。点击独立于表格行的链接应该照常切换红色框，而不调用正在触发的'selectedRow'点击事件。

来源

2010-07-19 aherrick

免责声明，下面的答案是不是最佳解决方案。如果可能，请使用不显眼的处理程序与@karim的解决方案一起使用。

如果他的解决方案是不的选项，例如通过这个事情链接自动生成的，那么你可以这样做：

$(function() { 
    $('.selectedRow').click(function(e) { 
    if(e.target.nodeName != 'A') 
     $(this).find('td:last a').click(); 
    }); 
});

You can test it here，它只是检查出点击并没有在第一位置的锚起源。如果是这样的话，它就完成了它需要做的事情，冒泡到该行的click事件不应该采取任何行动。

来源

2010-07-19 23:40:18

正在发生的事情（我认为）是，当你点击锚，事件冒泡并触发一个绑定到该行。我建议结合锚如下：

$('.toggleMe').click(function(e) { 
     e.stopPropagation(); // prevent event from bubbling up the DOM tree 
     $("#box").toggle();   
    });

而且，删除锚点的内联函数调用，并给它的类.toggleMe或这样（在上面单击处理程序使用）：

<a class="toggleMe" href="#">Toggle Me Here</a>

在这里尝试：http://jsbin.com/uyifu3/7/edit（点击主播将而不是触发.selectedRow点击事件，我添加了一个警报）。

来源

2010-07-19 23:23:18 karim79

是的，绝对不要让toggleMe代码冒泡。由于aherrick说html无法更改，只需在通过inline onclick调用的toggleMe函数中停止事件传播。 – istruble 2010-07-19 23:38:38

$('tr').click(function(){ 
    $('#box').toggle(); 
});

，只是删除了toggleMe()所以基本上单击链接的任何功能不比单击行不同。它只是在那里演出:)

来源

2010-07-19 23:29:08 Jason

尝试（在这个例子中，行/ TR）打了退堂鼓，以共同的父，然后深入回落到目标（带有一个onclick处理程序）。

$(e.target).parents('tr').first().find('td:last a').click();

来源

2010-07-19 23:32:52 istruble

我假设有一个以上的行（因为你使用的是类的TR）。此代码会为你工作：

$(document).ready(function(){ 
    // Remove the anchors 
    $(".selectedRow td:last a").each(function(){ 
    $(this).replaceWith($(this).html()); 
    }); 

    // Make entire row clickable 
    $(".selectedRow").click(function(e){ 
    $('#box').toggle(); 
    }); 
});

本质上，它消除了toggleMe()锚，使整个行可点击。

这是code in action。

来源

2010-07-19 23:39:52

jQuery的点击表行切换剖面

回答

相关问题