Tim Marshall Tim Marshall - 2 years ago 61
Javascript Question

JQuery .on("keydown") Not Working When Appended To Page

I have a side menu of which you can right-click and choose to rename. This removed the

<a href="...
from the
and adds an input field. I cannot seem to have this appended input do anything however it seems I can get this to work on inputs of which have not been appended.

$('.ShowInput').click(function(e) {
$('body').html("<input type='text' value='search' class='search'>");
$("input").on("keydown",function search(e) {
if(e.keyCode == 13) {

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="ShowInput">
Click to show input

Answer Source

Try binding your keydown event to an ancestor element, and pass your input with the search class as an argument to the .on() method.

$("body").on("keydown", "input.search", function (e) {
  var inputValue = $(this).val(); 
  if(e.keyCode == 13) {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download