How to make elements such as div span respond to keyboard events

I encountered a problem in my work these days. I went to Google and found the solution, but it was in English. I will translate it briefly so that more people can understand it
The translation is as follows：
I have an editable div and there is also an editable span inside the DIV. I want the span to respond to keyboard events,
Here is the test JS code:

Copy the codeThe code is as follows:

 
$(function() 
{ 
$('#someid').keypress(function(event){alert('test');}); 
}); 

Here is the test html code：

Copy the codeThe code is as follows:

 
<div  contenteditable="true"> 
editable follows:<span  contenteditable="true">Some TEXT</span> 
</div> 

If you test in the browser, you will see that when you press key on Some TEXT, there is no 'test' pop-up box pops up. I know that the reason for this problem is that the event is sent from the span's parent div, so the span does not trigger the event, and of course it is also because the span has no focus, so I want someone to help me find a solution.
Finally, a kind person helped solve this problem
I have submitted the solution code for your problem to /gaby/TwgkC/3/ and it works fine
Tested in FF, Opera, Chrome, Safari, IE8..
#someid needs to get focus to trigger keypress, if you want your code to get focus, use the .focus() method immediately after element creation

Copy the codeThe code is as follows:

 
function AppendSpan() 
{ 
$('#mydiv').append('<span  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(); 
}).focus();// bring focus to the element once you append it.. 
} 

Additional:
Two methods to trigger events (in fact, you need to use the contenteditable property), not sure if you can accept this situation
1. Wrap an editable span on the outer layer of another and set its property contenteditable="false"
demo js：

Copy the codeThe code is as follows:

 
function AppendSpan() 
{ 
$('#mydiv').append('<span contenteditable="false"><span  contenteditable="true">Some TExt</span></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 the codeThe code is as follows:

 
<div  contenteditable="true"> 
editable follows: 
</div> 

2. Let your #mydiv be in non-edited state when you need to trigger the keyboard event of the span
demo js：

Copy the codeThe code is as follows:

 
function AppendSpan() 
{ 
$('#mydiv').removeAttr('contenteditable').append('<span  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 the codeThe code is as follows:

 
<div  contenteditable="true"> 
editable follows: 
</div> 