javascript - jQuery bind event on dynamic element for focus, keypress, keydown, keyup didn't work

Question

<div id="t1" contenteditable="true" style="width: 400px; height: 200px;">
    <ul>
        <li style="list-style-type: none;">Apple</li>
    </ul>
</div>    <span id="dd"></span>

<script>
$(function () {
    event.returnValue = false;
    $('#t1>ul').on("click", 'li', function () {
        utility.test(this);
    });
});

var utility = {
    test: function (elem) {
        var $this = $(elem);
        $('#dd').html($this.html());
        if (event.preventDefault) event.preventDefault();
    }
}

above code is work fine, but if I change bind event from click to keydown as below

$('#t1>ul').on("keydown", 'li', function () {

then it's didn't work. I am using jQuery version 1.9.1, and try using .live for version 1.8.3, but still didn't work.

Thanks a lot.

Answer 1

带有标志的标签contenteditable将捕获并发出keydown事件，而不是其中的内容。简而言之，您<li>没有发出keydown事件。

Answer 2

为什么不一开始就选择 li？

$('#t1 li').on("keydown", function () {
    alert('You are typing');
    utility.test(this);
});