Keyup not working for dynamically added input-groups

I have already gone through questions available on this topic and have tried everything, but still my keyup function is not working.

$(document).ready(function() {

  $(document).on('keyup', '.pollOption', function() {
    var empty = false;
    $(".pollOption").each(function() {
      if ($(this).val() == '') {
        empty = true;
      }
    });

    if (empty) {
      $("#cpsubmit").attr('disabled', 'disabled');
      $("#moreop").attr('disabled', 'disabled');
    } else {
      $("#cpsubmit").removeAttr('disabled');
      $("#moreop").removeAttr('disabled');
    }

  });
  //Keep Track of no. of options on the page
  var noOfOptions = 2;
  // Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
  $("#moreop").on('click', function() {
    noOfOptions++;
    $("#options").append("<div class='input-group pollOption'><input class='form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
  });

  // To delete any option (only the dynamically created options can be deleted)
  $("#cpform").on('click', '#removeOption', function() {
    $(this).parents('.input-group').remove();
    noOfOptions--;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="cpform" method="POST" action="/polls/add">
  <div class="form-group">
    <label>Title</label>
    <input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
  </div>
  <div id="options" class="form-group">
    <label>Options</label>
    <input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
    <input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
  </div>
  <button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
  <button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>

This code works perfectly for the two inputs already in the HTML part. When I click on the “More Option” button the new field gets added but the “keyup” does not work on it. In fact, when I enter something on the new added inputs then my “More Option” & “Submit” button gets disabled (really do’t know why this is happening).

Answer

You’ve to add the class pollOption to the input and not the div in your append :

$("#options").append("<div class='input-group'><input class='pollOption form-control' ...
_____________________________________________________________^^^^^^^^^^

Instead of :

$("#options").append("<div class='input-group pollOption'><input class='form-control' ...
______________________________________________^^^^^^^^^^

Demo:

$(document).ready(function() {

  $(document).on('keyup', '.pollOption', function() {
    var empty = false;
    $(".pollOption").each(function() {
      if ($(this).val() == '') {
        empty = true;
      }
    });

    if (empty) {
      $("#cpsubmit").attr('disabled', 'disabled');
      $("#moreop").attr('disabled', 'disabled');
    } else {
      $("#cpsubmit").removeAttr('disabled');
      $("#moreop").removeAttr('disabled');
    }

  });
  //Keep Track of no. of options on the page
  var noOfOptions = 2;
  // Function to add input fields (since I may have to delete them I've use bootstrap's input-groups, I guess this is causing issue)
  $("#moreop").on('click', function() {
    noOfOptions++;
    $("#options").append("<div class='input-group'><input class='pollOption form-control' type='text' placeholder='New Option' name='op" + noOfOptions + "'/><span class='input-group-addon'><a href='#' id='removeOption' class='text-danger'>Remove</a></span></div>");
    $(this).attr('disabled','disaled');
  });

  // To delete any option (only the dynamically created options can be deleted)
  $("#cpform").on('click', '#removeOption', function() {
    $(this).parents('.input-group').remove();
    noOfOptions--;
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="cpform" method="POST" action="/polls/add">
  <div class="form-group">
    <label>Title</label>
    <input id="title" type="text" placeholder="Ask your question here..." name="title" class="form-control" />
  </div>
  <div id="options" class="form-group">
    <label>Options</label>
    <input type="text" placeholder="Option 1" name="op1" class="form-control pollOption" />
    <input type="text" placeholder="Option 2" name="op2" class="form-control pollOption" />
  </div>
  <button id="moreop" type="button" disabled="disabled" class="btn btn-outline-info btn-primary">More Options</button><br/><br/>
  <button id="cpsubmit" type="submit" disabled="disabled" class="btn btn-info btn-primary">Submit</button>
</form>