title: Detect keyup event of contenteditable child whose parent is a contenteditable div
body: <p><strong>Goal:</strong> Attach a keydown event handler to a contenteditable span that is the child of a contenteditable div. </p>
  
  <p><strong>Problem:</strong> If you type in the span the parent event is triggered not the childs. What I want is the child to trigger so I can grab the text. I only want THAT contenteditable child as there will be many. </p>
  
  <p>HTML/JS is below and the fiddle link is here: <a href="http://jsfiddle.net/aBYpt/4/" rel="noreferrer">http://jsfiddle.net/aBYpt/4/</a></p>
  
  <hr>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;div class="parent" contenteditable="true"&gt;
      Parent div text.
  
      &lt;span class="child" contenteditable="true"&gt;First child span text.&lt;/span&gt;
      &lt;span class="child" contenteditable="true"&gt;Second child span text.&lt;/span&gt;
      &lt;span class="child" contenteditable="true"&gt;Third child span text.&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div id="console"&gt;&lt;/div&gt;
  </code></pre>
  
  <h2>JavaScript/jQuery</h2>
  
  <pre><code>$(document).on( 'keyup', '.parent', function() {
      $('#console').html( 'Parent keyup event fired.' );
      //do stuff
  });
  
  $(document).on( 'keyup', '.child', function() {
      $('#console').html( 'Child keyup event fired.' );
      //do stuff
  });
  </code></pre>
  
  <p>**Note: Event handling is delegated to document because elements are dynamically added.</p>