I have a table where I click on a parent row which shows/hides child row with certain CSS class. The thing is that .toggle() is triggered with a click on a parent row and I would like to be triggered only by clicking on span with a class btn which is inside parent row.

This is HTML:

<table cellpadding="5" cellspacing="3" border="1">
  <tbody>
    <tr class="parent" id="2479">
      <td><span class="btn">text</span></td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr class="child-2479">
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    </tbody>
</table>

This jQuery:

$(function() {
    $('tr.parent')
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle('slow');
        });
    $('tr[class^=child-]').hide().children('td');
});

Here is jsfiddle link

I have a table where I click on a parent row which shows/hides child row with certain CSS class. The thing is that .toggle() is triggered with a click on a parent row and I would like to be triggered only by clicking on span with a class btn which is inside parent row.

This is HTML:

<table cellpadding="5" cellspacing="3" border="1">
  <tbody>
    <tr class="parent" id="2479">
      <td><span class="btn">text</span></td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr class="child-2479">
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    <tr>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
      <td>text</td>
    </tr>
    </tbody>
</table>

This jQuery:

$(function() {
    $('tr.parent')
        .click(function(){
            $(this).siblings('.child-'+this.id).toggle('slow');
        });
    $('tr[class^=child-]').hide().children('td');
});

Here is jsfiddle link

• javascript
• jquery
• html-table
• row
• toggle

3 Answers 3

You can change the selector to

$('tr.parent td span.btn').click(function(){...});

this will get you any span with the class button in a td that is in a tr with the class parent

UPDATE

If the table is created dynamically you can use the on() function instead of a click, if i'm understanding you right.

I see what you mean, even though your question doesnt reflect it. I updated the fiddle for you.

This is the jquery that you want:

$(function() {
    $('tr.parent td')
        .on("click","span.btn", function(){
            var idOfParent = $(this).parents('tr').attr('id');
            $('tr.child-'+idOfParent).toggle('slow');
        });
});

See the fiddle here

Try:

$("tr.parent > td").on( "click", "span.btn", function() {

    var childId = $(this).parents("tr").prop("id");
    $("tr.child-" + childId).toggle("slow");
});

Fiddle here

Try it with on()

 $("body").on("click", "tr span.btn", function(event){
     $(this).siblings('.child-'+this.id).toggle('slow');
 });