title: Click listener firing twice due to nested element
body: <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>