Javascript keyup事件在contenteditable内不起作用：true标记

我不知道我的代码有什么问题。My

keyup

事件不会在

contenteditable

标记内触发。这是我的密码：

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

---

示例

我已经更新了小提琴，并按照您想要的方式进行了操作。请试试这个：

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

                    })

---

接收击键事件的是

contenteditable

，而不是其中的跨度。忽略选择器中的

span

，处理程序将触发。您可能需要使用选择API来查找相应的

span

。无论何时您提出问题，请检查回答并验证。要了解其工作原理，请转到fiddle链接。单击运行，然后单击测试！可能你没有在fiddle左面板中包含jquery。我可以看到它在我这边工作。每当跨度被编辑时，红色就会消失。这就是所需的检查此小提琴它很简单，但解决了目的如果他在该div下有1000个跨距，他不会在每个跨距上添加contentediate=true。你应该把它变成动态的。我也没有改变他的html部分，而是通过js实现了输出，这就是应该做的。

<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>

.abc{color:red;}