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();
    }
}

上面的代码工作正常，但如果我将bind事件从click更改为keydown，如下所示

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

然后它没有用。我正在使用jQuery版本1.9.1，并尝试使用.live版本1.8.3，但仍然无法正常工作。

非常感谢。

Answer 1

为什么不首先选择li？

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

Answer 2

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

动态元素上的jQuery绑定事件用于焦点，keypress，keydown，keyup不起作用

2 个答案: