Javascript 为什么JQuery on（）事件处理程序不能使用contenteditable从动态生成的元素捕获事件？

我在

中动态生成

标记，但是我设置的用于捕获来自

标记的keyup事件的事件处理程序没有捕获它们

HTML

<!-- Non-dynamically generated paragraph -->
<div class="note">
    <p contenteditable="true"></p>
</div>

<!-- Contains dynamically generated paragraphs -->
<div class="note" contenteditable="true"></div>

<!-- Debug output -->
<div id="output"></div>

我相信对于某些人来说，

标记没有正确添加，因此DOM无法识别它或不知道它的存在

---

编辑2: 我用vanilla JS替换了jQuery功能，该功能插入了新的段落标记，希望这可以解决我的问题，但事实并非如此

新代码：

var textNode = null;
var nodes = this.childNodes;
for (var i = 0; i < nodes.length; i++)
{
    if (nodes[i].nodeType === 3)
    {
        textNode = nodes[i];
        break;
    }
}
if (textNode)
{
    var p = document.createElement("P");
    var attr = document.createAttribute("contenteditable");
    attr.value = "true";
    p.setAttributeNode(attr);
    p.addEventListener("keyup", function() {
        $("#output").append("<br/>Special paragraph click!");
    });
    p.innerHTML = textNode.nodeValue;
    var parent = $(this)[0];
    parent.insertBefore(p, textNode);
    parent.removeChild(textNode);
}

var textNode=null；
var nodes=this.childNodes；
对于（var i=0；i特殊段落点击！）；
});
p、 innerHTML=textNode.nodeValue；
var parent=$（此）[0]；
parent.insertBefore（p，textNode）；
parent.removeChild（textNode）；
}

---

这似乎与JS处理从contenteditable元素中的元素触发的事件的方式有关。

唯一的问题是动态

标记上没有
contenteditable
属性。仅仅因为它们包含在
contenteditable
元素中，并不意味着它们也可以编辑——它们需要显式地使用属性

在我的示例中，我对其进行了简化，只是为了表明动态标记可以工作。
使用$（'body'）.on（'keyup'，'note p'，function（）{}）@FredrikL-没有理由对OP已经拥有的东西进行研究。OP-试图捕捉段落上的键控事件而不是输入有什么意义？@Pointy这对我不起作用。当我按下底部div中的一个键时，它仍然只输出“note tag keyup”。如果它正在工作，它也会输出“p tag keyup”。@mb595x好的，是的，我现在看到了。这个问题似乎不是jQuery的问题；浏览器以周围的
为目标触发这些键盘事件。因此，委派的
.on（）
处理程序的选择器与事件的目标不匹配，因此处理程序没有运行。虽然我看到它在您的小提琴中工作，但我更新了小提琴，将
contenteditable=“true”
添加到段落标记中，但我仍然没有得到预期的输出。@mb595x：我明白您的意思。我不知道为什么，但似乎父级
contenteditable
属性会干扰子级，就像它得到了事件一样。如果添加
$（this）.attr（'contenteditable'，false）$(this).contents().filter(function() {
   return this.nodeType === 3;
}).wrap('<p class="test"></p>');

var textNode = null;
var nodes = this.childNodes;
for (var i = 0; i < nodes.length; i++)
{
    if (nodes[i].nodeType === 3)
    {
        textNode = nodes[i];
        break;
    }
}
if (textNode)
{
    var p = document.createElement("P");
    var attr = document.createAttribute("contenteditable");
    attr.value = "true";
    p.setAttributeNode(attr);
    p.addEventListener("keyup", function() {
        $("#output").append("<br/>Special paragraph click!");
    });
    p.innerHTML = textNode.nodeValue;
    var parent = $(this)[0];
    parent.insertBefore(p, textNode);
    parent.removeChild(textNode);
}