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

Question

I have a side menu of which you can right-click and choose to rename. This removed the <a href="... from the <li></li> 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) {
        alert($(this).val());
    }
});

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

Answer 1

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) {
    alert(inputValue);
  }
});

Answer 2

Use following way to bind events for dynamically added elements. Reference: Event binding on dynamically created elements?

$('document').on('keydown', '.search', function() {
   if(e.keyCode == 13) {
        alert($(this).val());
    }
});