Click listener firing twice due to nested element
<p>I have the following listeners:</p>

<pre><code>$('td').on('click', '.time_note', function (e) { // When the user clicks the note div
    alert('note click');
});

$('table').on('click', 'td', function(e) {
    alert('time click');
});
</code></pre>

<p>I need two different actions depending on whether the note is clicked or the entire cell is clicked. I tried doing this, however, if the note is clicked - so is the cell. Both actions are fired, subsequently. Makes perfect sense.</p>

<p>However, I don't want that to happen. If the note is clicked, the action for the entire cell should not fire and vice-versa. What way is there to accomplish this? I tried to use <code>.off</code>, but that didn't work.</p>
