How to Make div span and other elements respond to Keyboard Events operation guide

I encountered a problem in my work over the past few days. google found a solution in English, which is easy to understand.
The translation is as follows::
I have an editable div and an editable span in the DIV. I want to make the span respond to Keyboard Events,
Here is the JS Code for testing:
Copy codeThe Code is as follows:
$ (Function ()
{
$ ('# Someid'). keypress (function (event) {alert ('test ');});
});

Here is the test html code:
Copy codeThe Code is as follows:
<Div id = "mydiv" contenteditable = "true">
Editable follows: <span id = "someid" contenteditable = "true"> Some TEXT </span>
</Div>

If you test in a browser, you will see that when you press the key on Some TEXT, the 'test' pop-up box does not appear, I know the cause of this problem is that the event is sent from the div of the parent node of span, so span does not trigger the event. Of course, it is also because span has no focus, so I want someone to help me find a solution.
Finally, I was able to help solve this problem.
Solution code for your problem I have submitted to the http://jsfiddle.net/gaby/TwgkC/3/ and work fine
Test in FF, Opera, Chrome, Safari, IE8...
# Someid needs to get the focus to trigger keypress. If you want your code to get the focus, use the. focus () method immediately after the element is created.
Copy codeThe Code is as follows:
Function AppendSpan ()
{
$ ('# Mydiv'). append ('<span id = "someid" contenteditable = "true"> Some TExt </span> ');
// Then I want to handle the keypress event on the inserted span
$ ('# Someid'). keypress (function (event ){
// Do something here
Alert (this. id );
}). Focus (); // bring focus to the element once you append it ..
}

Append:
Two methods are used to trigger the event (in fact, the contenteditable attribute must be used). you are not sure whether you can accept this situation.
1. Wrap one editable span on the outer layer of the other and set its attribute contenteditable = "false"
Demo js:
Copy codeThe Code is as follows:
Function AppendSpan ()
{
$ ('# Mydiv '). append ('<span contenteditable = "false"> <span id = "someid" contenteditable = "true"> Some TExt </span> ');
// Then I want to handle the keypress event on the inserted span
$ ('# Someid'). keypress (function (event) {alert ('test ');});
}
$ (Function ()
{
$ ('# Mydiv'). keypress (function (event) {AppendSpan ();});
});

Demo html:
Copy codeThe Code is as follows:
<Div id = "mydiv" contenteditable = "true">
Editable follows:
</Div>

2. Put your # mydiv in a non-editable state. When you need to trigger a span keyboard event
Demo js:
Copy codeThe Code is as follows:
Function AppendSpan ()
{
$ ('# Mydiv'). removeAttr ('contenteditable'). append ('<span id = "someid" contenteditable = "true"> Some TExt </span> ');
// Then I want to handle the keypress event on the inserted span
$ ('# Someid'). keypress (function (event) {alert ('test ');});
}
$ (Function ()
{
$ ('# Mydiv'). keypress (function (event) {AppendSpan ();});
});

Demo html:
Copy codeThe Code is as follows:
<Div id = "mydiv" contenteditable = "true">
Editable follows:
</Div>