div spanなどの要素がキーボードイベントに応答できるようにする

私のこの数日の仕事の中で1つの問題に出会って、googleはすぐに解決策を見つけて、ただ英語で、私は簡単に翻訳してもっと多くの人に理解することができます
訳文は次のとおりです.
私は編集可能なdivを持っていて、DIVの中に編集可能なspanがあります.spanがキーボードイベントに応答できるようにしたいです.
ここではJSコードをテストします.

$(function()

{

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

});// http://www.cnblogs.com/ahjesus  ， ， ！

htmlコードをテストします.

<div id="mydiv" contenteditable="true">

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

</div>

ブラウザでテストすると、Some TEXTでpress keyが表示されると、「test」ポップアップボックスがポップアップされません.この問題の発生原因は、spanの親ノードdivからイベントが発生したためであることがわかります.spanはイベントをトリガーしていません.もちろん、spanに焦点がないため、誰かに解決策を見つけてもらいたいと思っています.
ついに親切な人がこの問題を解決した.
あなたの問題に関するソリューションコードはhttp://jsfiddle.net/gaby/TwgkC/3/に提出され、正常に動作しています.
FF,Opera,Chrome,Safari,IE 8で..テスト中#someid keypressをトリガーするにはフォーカスを取得する必要があります.コードを取得したい場合は、要素の作成後すぐに.focus()メソッドを使用します.

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

}// http://www.cnblogs.com/ahjesus  ， ， ！

追加:イベントをトリガーする2つの方法(実際にはcontenteditable を使用する必要があります)、この状況を受け入れることができるかどうか分かりません.
1、編集可能なspanを別の外層に包み、その属性contenteditable="false"を設定する
demo js:

function AppendSpan()

{

    $('#mydiv').append('<span contenteditable="false"><span id="someid" 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();});

});// http://www.cnblogs.com/ahjesus  ， ， ！

demo html:

<div id="mydiv" contenteditable="true">

editable follows:

</div>

 
2、#mydivを非編集状態にし、spanのキーボードイベントをトリガーする必要がある場合
demo js:

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

});// http://www.cnblogs.com/ahjesus  ， ， ！

demo html:

<div id="mydiv" contenteditable="true">

editable follows:

</div>