jQuery事件在正确的元素上不起作用

我把完整的代码放在这里，这样就不会遗漏任何可能导致此问题发生的内容

运行代码后，按照以下步骤复制问题

单击+，它将创建一个新的无序列表

ul

，带有

li

在

li

内单击并键入内容，然后按

Enter

。它将在它之后创建一个新的

li

。因此，在每个

li

上都有一个

keypress

事件绑定，它在Enter上插入一个新的

li

现在在第二个

li

中键入内容，然后按Tab键。它将把这个

li

放在前面的

li

中。还将绑定一个制表符按下事件

现在再次单击相同的

li

，然后按Enter键。问题就在这里出现了

预计新的

li

将在此之后插入，但实际上它是在父

li

之后插入的

调试后，它显示$（this）指的是父

li

，是为

keypress

事件处理的内部代码

请让我知道为什么会发生这种情况

$（'document'）.ready（函数（）{
$（'#plus'）。单击（函数（）{
$（'#notes'）。追加（fillnote（））；
});
});
函数fillnote（）{
var$ul=$（“
”）.addClass（'myUL'）.append（getLi（））；
变量节点=$（''）.append（$ul）；
返回节点；
}
函数getLi（）
{
返回$（“
”）.addClass（'edit-list'）
.attr（'contentEditable'，true）；
}
$（文档）.on（'keydown'，'edit list'，函数（e）{
var keyCode=e.keyCode | | e.which；
//输入键
如果（键代码==13）{
var$newLi=getLi（）；
美元（本）。之后（$newLi）；
$newLi.focus（）；
返回false；
}
//制表键
if（keyCode==9）{
console.log（this）；
moveInsidePrevSibling（$（this））；
返回false；
}
});
函数moveInsidePrevSibling（$obj）
{
var$prev=$obj.prev（）；
var$ul=$（“
”）.addClass（'myUL'）；
$prev.append（$ul）；
$ul.附加（$obj）；
}

#注释
{
最小高度：800px；
宽度：800px；
}
保险商实验室{
保证金：0；
填充：0；
列表样式类型：无；
}
ulli{
光标：指针；
位置：相对位置；
填充：5px 8px 5px 20px；
背景：#eee；
字体大小：14px；
过渡：0.2s；
线高：1.5em；
高度：自动；
}
第n个孩子（单数）{
背景#f9f9f9；
}
ulli：悬停{
背景：ddd；
}

+

我能够找出问题所在，而这与jquery无关

原来罪魁祸首是

contentEditable

属性。我为所有

li的

将此属性设置为true。存在一个错误，即当子级和父级都将此属性设置为

true

，则任何

keypress

事件都将应用于父级而不是子级

---

我通过将parent的属性设置为

false

确认了这一点，它起到了作用。

我认为这将非常困难，因为事件委派是如何工作的，因为您的子元素位于父元素内部，父元素也有一个用于

键控

的事件侦听器，

$（此）

将始终是我认为的父元素。我建议使用唯一的引用类或ID来分离这两个事件功能。这个过程是嵌套的。所以我不能使用id和单独的类名。