Tim Marshall Tim Marshall - 6 months ago 8
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
<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

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);
  }
});
Comments