Question

51

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

rated 0 times [ 55] [ 4] / answers: 1 / hits: 24257 / 8 Years ago, tue, may 17, 2016, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anthonyw

Add To Favorites

Follow

Total Points: 589

Total Questions: 117

Total Answers: 117

Location: Dominican Republic

Member since Sun, Sep 4, 2022

2 Years ago

answered 8 Years ago domeniccolti · Accepted 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);

  }

});