javascript - 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 €&lt;/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

这是工作的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() 比使用 live 更好。它的预成型速度更快。像那样：

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

Answer 3

.on() 已取代 .live()。On 和 hide 对你不起作用？他们对我来说工作得很好...... http://jsfiddle.net/Umxgy/

编辑 由于您使用的是旧版本的 jQuery，因此 .live() 是正确的。让我知道这是否适合您。我有一个与你不同的选择器。

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