Keyup not working for dynamically added input-groups

Question

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 1

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>