嵌套内容上的Keypress事件可编辑(jQuery)

Question

我有一个CONTENTEDITABLE div,在div里面我有一个CONTENTEDITABLE范围,我想做的是能够处理内部SPAN上的onkeypress事件.

所以,javascript代码将是:

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

HTML内容将是:

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

如果你在浏览器上测试它,当你在某个TEXT上按一个键时,你会看到你不会看到'测试'对话框,我知道问题是在父div中触发了事件,所以SPAN没有得到这个事件,也是因为它没有焦点.所以我希望你帮助找到解决方案.

Answer 1

您在问题中发布的确切代码似乎在http://jsfiddle.net/gaby/TwgkC/3/上运行正常

经过测试并使用FF,Opera,Chrome,Safari,IE8 ..

只有更改是删除注释,它以当前形式创建语法错误.

在#someid需要有重点,为了使按键的工作.
如果您希望代码在创建后立即将焦点放在元素上,请使用该.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..
}

更新

处理这种情况的两种方法(存在嵌套contenteditable元素的事实),不确定你的情况是否可以接受,但在这里它们是......

1. 将新的contenteditablespan 包装在另一个中,设置为contenteditable="false"
   (demo: http ://jsfiddle.net/gaby/TwgkC/10/)
2. 令#mydiv到不会contenteditable,一旦你添加的跨度..
   (演示: http://jsfiddle.net/gaby/TwgkC/11/)