jQuery keyup function not executing

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.


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

Or

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

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.

Tags:

Html

Jquery

Input