tr和td都可以点击并且应该触发不同的动作

Question

在表格中，每个列都是可点击的，并在点击时显示一些内容。此外，每列都有一个td，它包含一个隐藏列的按钮。喜欢这个

隐藏部分对我不起作用。显然，揭示部分首先被触发，隐藏被忽略/不被触发。

$("tr td.remove").live("click", function(){
    $(this).parent("tr:first").hide('slow');
});

$(".reveal").click(function(){
    $(this).next(".content").slideToggle("fast");
});

HTML

 <table>
    <tr class="reveal">
       <td>300,00 €</td>
       <td class="remove">X</td>
    </tr>
    <tr class="content">
        <td colspan="2">
           Content
        </td>
    </tr>
 </table>

我如何将其结合起来接受这两个动作？我使用jQuery 1.6.2。

小提琴： http://jsfiddle.net/2jVtC/1/

Answer 1

Here is working jsFiddle.

$('.content').hide();
$(".reveal").click(function() {
    $(this).next(".content").slideToggle("fast");
});
$("tr td.remove").live("click", function() {
    $(this).parent("tr").slideUp('slow');
    $(this).parent().next(".content").slideUp('slow');
});​

备选选择

注意：如果您使用的是jQuery 1.6.4，closest()方法将无效。

$(".reveal").click(function(){
    $(this).closest(".content").slideToggle("fast");
});

Answer 2

简单：）

$("tr td.remove").live("click", function(e){
    e.stopPropagation();
    $(this).parent("tr:first").hide('slow');
});

$(".reveal").click(function(e){
    e.stopPropagation();
    $(this).next(".content").slideToggle("fast");
});

最好使用.on（）而不是直播。它的预制速度更快。那样：

$('table')
   .on('click','.reveal',function(e){
      e.stopPropagation();
      //stuff
   }).on('click','.remove',function(e){
      e.stopPropagation();
      //stuff
   });

Answer 3

.on（）已替换.live（）。开启和隐藏不适合你？他们的工作对我很好...... http://jsfiddle.net/Umxgy/

修改 由于您使用的是jQuery的旧版本，因此.live（）是正确的。如果这对您有用，请告诉我。我有一个与你不同的选择器。

编辑2 很抱歉误解了你的问题。这是一个新的小提琴：http://jsfiddle.net/Umxgy/2/