jQuery keyup function not executing

Question

I have this code :

<script>
     $('#searchInput').keyup(function() {
               alert('Handler for .keyup() called.');
     });
</script>

and this input :

<input id='searchInput' type='text' placeholder='Search other alumni users' />

but when I press a key, the alert doesn't come up... I've included the jQuery script already.

Answer 1

Change your code to

$(function(){ // this will be called when the DOM is ready
  $('#searchInput').keyup(function() {
    alert('Handler for .keyup() called.');
  });
});

to ensure the DOM element exists when you build the jQuery set.

Answer 2

$(document).ready(function() {
  $('#searchInput').keyup(function() {
    alert('Handler for .keyup() called.');
  });
});

Or

$(function() { 
  $('#searchInput').keyup(function() {
    alert('Handler for .keyup() called.');
  });
});

Answer 3

keyup/keydown seem to only work on elements that are present at document.ready.

If you are triggering your event from elements that were altered or injected post pageload, these events will not fire.

Finding or creating a parent of the element to be watched that's present on load then setting the event to trigger from that parent element can bypass this.