Events on children of contenteditable element

javascript, jquery

Solution

This is barely possible with `contenteditable` seeing as the elements do not hold input like events and therefore do not have real focus, so you can't actually determine the `event.target`. The `event.target` will always be the container that has the attribute `contenteditable="true"`.

However you can use the `DOMCharacterDataModified` event like the example & demo below.

$('#test').on('DOMCharacterDataModified',  function( event ) {
    if($(event.target).parent().attr('id') === 'test') { // Reference 1 
        alert('modified');
    }
});

Demo: http://jsfiddle.net/nb5UA/15/

Reference 1: The `if` statement is checking that the `event.target` is a direct child of the `#test` container.

The browser support for `DOMCharacterDataModified` is not bad. < IE9 is not supported, and I can't find much info on the event so if anyone has a good resource for it, please share in the comments.

Problem

I have ``` myDiv.bind('keypress', '> *', function(event) { console.log('keypress') }); ``` but it does not seem to work. myDiv is contenteditable and I am trying to get access to p elements that are being edited. http://jsfiddle.net/nb5UA/5/ (try typing within the div created after you click enter)

Original source