Trouble running Javascript as expected

Question

$(document).ready(function(){
 $(".add-item-popup").click(function(){
  var form = "<input type='text' class='add-item-inp' />";
  $.alert(form);
 });

 $(".add-item-inp").change(function(){
  alert($(this).val());
 });
});

<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>
</head>
<body>
<a href="#" class='add-item-popup'>Add</a>
</body>
</html>

I have an input field in a popup and I'm trying to grab the value of input when it's changed. But I'm not able to grab the value of that input field that I added through jquery inside a popup. Please help

Read up on [Understanding Event Delegation](https://learn.jquery.com/events/event-delegation/) — charlietfl, May 01 '18 at 16:41

score 1 · Accepted Answer · answered May 01 '18 at 16:44

Try by delegating the event from body & use keyup if it is required to grab the value on every key up

$(document).ready(function() {
  $(".add-item-popup").click(function() {
    var form = "<input type='text' class='add-item-inp'/>";
    $.alert(form);
  });

  $("body").on('keyup', ".add-item-inp", function() {
    console.log($(this).val());
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js"></script>

<a href="#" class='add-item-popup'>Add</a>

Trouble running Javascript as expected

1 Answers1