Detect keyup event of contenteditable child whose parent is a contenteditable div

Question

Goal: Attach a keydown event handler to a contenteditable span that is the child of a contenteditable div.

Problem: 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.

HTML/JS is below and the fiddle link is here: http://jsfiddle.net/aBYpt/4/

---

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span class="child" contenteditable="true">First child span text.</span>
    <span class="child" contenteditable="true">Second child span text.</span>
    <span class="child" contenteditable="true">Third child span text.</span>
</div>

<div id="console"></div>

JavaScript/jQuery

$(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
});

**Note: Event handling is delegated to document because elements are dynamically added.

Answer 1

So this is a bug. Workaround confirmed for FF23 and CHROME29 (on linux with no vm so can't test IE). You must set the wrapping spans as contenteditable false, you can't just omit declaring the contenteditable attribute, which is rediculous. Solution via Keypress event on nested content editable (jQuery)

Here is the fiddle: http://jsfiddle.net/aBYpt/14/

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span contenteditable="false">
        <span class="child" contenteditable="true">First child span text.</span>
    <span contenteditable="false">
        <span class="child" contenteditable="true">Second child span text.</span>
    </span>
</div>

<div id="console"></div>

JavaScript/jQuery

$(document).on( 'keyup', '.parent', function() {
    //do stuff
    $('#console').html( 'Parent keyup event fired.' );
});

$(document).on( 'keyup', '.child', function(e) {
    //do stuff
    $('#console').html( 'Child keyup event fired.' );
    e.stopPropagation();
});