javascript - keyup event not working inside contenteditable:true tag -

i don't know problem code. keyup event not triggered inside contenteditable tag. here code :

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

fiddle example

i have updated fiddle , made work way wanted. please try this:

http://jsfiddle.net/w2p9t/7/

js code:

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