Question

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

Answer 1

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