Span tag inside contentEditable div needs keypress event

Question

I have the following div in my html code:

<div id="expanderInput" tabIndex="1" contentEditable></div>

I'm using a contentEditable div as a simple, cross-browser method of making an auto-expanding textbox. I'm also doing input validation on what the user enters into this div. It is supposed to be a list of email addresses separated by commas. When the user tries to submit incorrect information, my javascript chunks up the input and highlights in red all the incorrect chunks.

//split the address into the comma-separated chunks
var chunks = splitForward(forwardsTo);

//Grab each bad chunk one at a time and stick it in a span with a red-colored text
for(var i = 0; i < invalids.length; i++)
{
    var current = chunks[invalids[i]];
    current = '<span class="highlighted">' + current + '</span>';
    chunks[invalids[i]] = current;
}
$("#expanderInput").html(chunks.join());
initHighlighted();

The array 'invalids' holds the indexes of all the bad chunks. Everything up to this point works fine. But once the user starts typing inside the red text I need the red to disappear, but just in that span. For example, if there are two bad chunks, each highlighted in red, and the user starts fixing one, the other needs to stay red.

I've tried attaching an event listener to the spans:

initHighlighted = function()
{
    $(".highlighted").keypress(function()
    {
        alert("It works!");
    });
};

But the event never happens, even when the user edits the text in red. Using browser's developer's tools, I can see that the event handler is there, it is just never set off. Is it the contentEditable attribute on the div causing the span from receiving the event? I've also tried making the spans themselves contentEditable, but the behavior is still the same.

Answer 1

Unless I'm mistaken, this should solve your problem :

initHighlighted = function()
{
    $(".highlighted").live("keypress",function()
    {
        alert("It works!");
    });
};

Because your spans are added after the initial loading of the DOM the keypress event listeners haven't been attached as there was nothing to attach them to. Jquery's live sorts this out for you by attaching those listeners to, in this case, anything with the class 'highlighted' no matter when they are added to the DOM.

Read the documentation on the Jquery site to get a much better explanation than I could give you : http://api.jquery.com/live/

EDIT : My apologies for not reading your question properly and realising that your were attaching the keypress listener after after the 'highlighted' spans were added.

Have you read this though :

http://stackoverflow.com/questions/1033004/keyboard-events-for-child-elements-in-a-contenteditable-div