I have
myDiv.bind('keypress', '> *', function(event) { console.log('keypress') });
但似乎它不起作用。
myDiv是可编辑的,我正在尝试访问被编辑的p元素。
http://jsfiddle.net/nb5UA/5/(在点击enter后创建的div中尝试输入)
I have
myDiv.bind('keypress', '> *', function(event) { console.log('keypress') });
但似乎它不起作用。
myDiv是可编辑的,我正在尝试访问被编辑的p元素。
http://jsfiddle.net/nb5UA/5/(在点击enter后创建的div中尝试输入)
$('#test').on('DOMCharacterDataModified', function( event ) {
if($(event.target).parent().attr('id') === 'test') { // Reference 1
alert('modified');
}
});
演示: http://jsfiddle.net/nb5UA/15/
参考1:
if
语句正在检查event.target
是否是#test
容器的直接子元素。
DOMCharacterDataModified
的浏览器支持还不错。不支持< IE9,我找不到关于该事件的太多信息,如果有人有好的资源,请在评论中分享。
contenteditable
。那似乎是动态内容的一个不错建议。 - Jonathan Lonowski<div id="test">
总是 event.target
。$('#test').on('keypress', function (e) {
console.log(e.target);
});
使用这个方法,在Chrome中,控制台只会记录:
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
...
click
而不是keypress
可以工作),问题在于键盘事件只能在contenteditable
元素的顶层处理。 - georg按键事件会冒泡到容器元素,因此您不一定需要绑定到子元素上。相反,只需绑定到容器上,然后通过访问event.target属性来检查哪个元素被编辑。
$('#container').on('keypress', function (event) { alert(event.target) });