CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DarkLeafyGreen
DarkLeafyGreen

Reputation: 70466

Both tr and td clickable and should trigger different actions

In a table each column is clickable and reveals some content when clicked. Besides each column has a td which holds a button to hide the column. Like this

enter image description here

The hide part does not work for me. Obviously the reveal part is triggered first and hide is ignored/not fired.

$("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>

How can I combine this to accept both actions? I use jQuery 1.6.2.

fiddle: http://jsfiddle.net/2jVtC/1/

Upvotes: 3

Views: 306

Answers (3)

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

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

Alternative select

Note: If you are using jQuery 1.6.4, closest() method won't work.

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

Upvotes: 3

Jeff Fabiny
Jeff Fabiny

Reputation: 325

.on() has replaced .live(). On and hide don't work for you? They work just fine for me... http://jsfiddle.net/Umxgy/

EDIT Since you are using an older versin of jQuery, .live() is correct. Let me know if this works for you. I have a different selector than you do.

EDIT 2 Sorry for misunderstanding your question. Here is a new fiddle: http://jsfiddle.net/Umxgy/2/

Upvotes: 1

Sergei Zahharenko
Sergei Zahharenko

Reputation: 1524

Simple :)

$("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");
});

It is better ti use .on() than live. it's preforms faster. like that:

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

Upvotes: 3

Related Questions