keyup事件在contenteditable内部无效：true标记

Question

我不知道我的代码有什么问题。我的keyup事件未在contenteditable标记内触发。这是我的代码：

 $(document).on( 'keyup' , '#editable_div span' ,function (e) {
                    e.preventDefault();
                    $(this).removeClass('abc');
                });

Fiddle示例

Answer 1

我已经更新了小提琴，并按照您想要的方式完成了这项工作。请试试这个：

http://jsfiddle.net/W2P9t/7/

JS代码：

var spansContent  = Array();
$("#editable_div span").each(function(){
   spansContent.push($(this).html()); 
});



    $(document).on( 'keyup' ,function (e) {
                        e.preventDefault();
                        for(var i=0;i<spansContent.length;i++)
                        {
                            if($($("#editable_div span")[i]).html()!=  spansContent[i]) {
                            $($("#editable_div span")[i]).removeClass('abc');
                            }
                        }

                    })

HTML：

<div id="editable_div" contenteditable="true">
    <span class="abc">hello1</span>
    <span>hello2</span>
    <span class="abc">hello3</span>
    <span class="abc">hello4</span>
    <span>hello5</span>
    <span class="abc">hello6</span>
</div>

CSS：

.abc{color:red;}