Question

I have a few rows in my table in the following format,

<tr class = "parent">
    <td class = "first"> asdf </td>
    <td class> qwerty </td>
    <td class> zxcv </td>
    <td class> 1234 </td>
</tr>

I want to perform action A when I click on “asdf” and action B when any one of the remaining children of the row is clicked. I wrote,

//Action A
$('.first').live('click', function() { console.log('first clicked'); });

//Action B
$('.parent').children().not('.first').live('click', function() { console.log('others clicked'); });

For some reason the code for Action B is not working. I need the “live” attachment for both actions since rows can be added/deleted.

What should I do?

Answer 1

<table>
  <tr class="parent">
    <td class="first"> asdf </td>
    <td class> qwerty </td>
    <td class> zxcv </td>
    <td class> 1234 </td>
  </tr>
</table>

$('tr.parent').find('td').live('click', function(){
    if ($(this).is('.first')) {
        console.log('Has .first.');
    } else {
        console.log('Does not have .first.');
    }
});

http://jsfiddle.net/GnX4L/

Maybe a better way:

$('tr.parent').find('td').live('click', function(){
    if ($(this).is(':first-child')) {
        console.log('Is first child.');
    } else {
        console.log('Not first child.');
    }
});

http://jsfiddle.net/GnX4L/1/