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

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>

Hello, I am not sure what you are asking, do you only want to keep the — shell, May 17 '16 at 00:58
@shell I want to fire an event on enter of the appended `` field. — , May 17 '16 at 01:00

score 8 · Accepted Answer · answered May 17 '16 at 01:03

8

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

answered May 17 '16 at 01:03

SimianAngel

631
10
14

This works perfectly! Thank you – May 17 '16 at 01:07

score 4 · Answer 2 · edited May 23 '17 at 10:34

4

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

edited May 23 '17 at 10:34

Community

1
1

answered May 17 '16 at 01:01

Mahesh Chavda

593
3
9

1

$(document).on('keydown', '.search', function() { if(e.keyCode == 13) { alert($(this).val()); } }); – StanleyD Jun 28 '19 at 08:46

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

2 Answers2

Linked