Question

Given a table row (TR). Whenever a user clicks on a table row I want to check the checkbox, similar to as seen on Google Drive / Google Docs.

The exception is with the checkbox or any <a> tags as they have different actions… If the user clicks of the checkbox or <a> tag I do not want the checkbox to auto check/uncheck. How can I setup a binding that trackings the click and lets the code know whether to select the checkbox or to ignore as it is a checkbox or <a> tag click?

Example jsfiddle: http://jsfiddle.net/xHKUZ/1/

Sample Code:

<table>
<tr>
        <td class="selector">
            <input type="checkbox" name="folders" value="67">
        </td>
        <td class="name">
            <a>Item 15</a>
        </td>
        <td class="creator">
            <span class="creator">Your Name</span>
        </td>
        <td class="last_modified">
            <time class="" datetime="2012-11-11T00:08:09Z">Nov-10 4:08 PM</time>
        </td>
        <td class="actions">
            <div class="actions-group">
                <a class="dropdown-toggle" data-toggle="dropdown">
                    <i class="icon-gear">Settings</i>
                    <i class="icon-caret"></i>
                </a>
                <ul class="dropdown-menu dropright">
                    <li><a data-rename="true">Rename</a></li>
                    <li><a data-archive="true">Delete</a></li>
                </ul>
            </div>
        </td>
</tr>
</table>

​

Answer 1

$("table").delegate("td", "click", function(e) {
  console.log(e);
  // e.delegateTarget === your table element
  // e.currentTarget === the td clicked
  // e.target === the actual element that you clicked
});​

You should just be able to check the node type of e.target to get your desired behavior.