为什么JQuery on（）事件处理程序无法使用contenteditable捕获动态生成的元素中的事件？

Question

我正在<div contenteditable=true>内动态生成<p>标记，但是我设置为捕获来自<p>标记的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>

JS

$(document).ready(function() {
    $(".note").keyup(function(evt) {
        $("#output").append("<br/>note tag keyup");
        // Surround paragraphs with paragraph tag
        $(this).contents().filter(function() {
            return this.nodeType === 3;
        }).wrap('<p class="test"></p>');
    });

    $(".note").on("keyup", "p", function(evt) {
        $("#output").append("<br/>p tag keyup");
    });
});

小提琴： https : //jsfiddle.net/mibacode/axgccwoq/3/

第一个div元素演示了我可以成功地从加载时生成的段落标签中捕获keyup事件。 第二个div显示我动态生成的段落没有触发（或JQuery不能捕获） keyup事件。

---

编辑：

问题/错误似乎与如何在此部分代码中生成段落标签并将其添加到DOM有关：

$(this).contents().filter(function() {
   return this.nodeType === 3;
}).wrap('<p class="test"></p>');

我相信对于某些<p>标记，由于添加不正确，因此DOM无法识别或不知道它的存在。

---

编辑2：我替换了用香草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);
}

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

Answer 1

唯一的问题是动态<p>标记上没有contenteditable属性。 仅仅因为它们包含在contenteditable元素中也不能使它们也可编辑-它们需要显式的属性。

在我更新的小提琴中 ，我已经简化了它，只是为了说明动态标记可以正常工作。