Jquery keyup not working

Question

For some reason, when I add a class to various inputs (after the user presses the submit button), this function does not record keystrokes in these inputs. I have to do something fundamentally wrong since I tried $('incomplete_required').keyup(){} and which is lower since .on() seems to be more modern ..

 $(document).ready(function(){ $('.incomplete_required').on("keyup", function(){ console.log('keyed'); }); }); 

What have I done wrong here?

thanks

Answer 1

If you dynamically change elements in dom, it is best to delegate the event to existing parents in dom

 $(document).ready(function(){ $('body').on("keyup",'.incomplete_required', function(){ console.log('keyed'); }); }); 

Obviously replacing body closest parent that exists on dom ready

Delegating - the event will go to the "parent" element - where the event is processed

Answer 2

Having seen that this works before sending, I think that you lose event bindings when elements are re-displayed, but the document ready event no longer fires.

A dynamic binding solution may be required here:

 $(document).ready(function(){ $(document).on('keyup', '.incomplete_required', function(){ console.log('keyed'); }); });​ 

Remember that document very far away, so the closest static element will be better off course.

Answer 3

Instead, bind to the keypress event.

Edit: http://jsfiddle.net/RRgvU/