Dynamically Generated Event Capture

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>

CSS

.note {
    width: 300px;
    height: 60px;
    background: #f9f9f9;
    margin: 20px;
    border: 1px solid #eaeaea;
}
.note p {
    margin: 0;
    background: #f1f1f1;
}

JavaScript

$(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" contenteditable="true"></p>');
    });

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