Keyup funktioniert nicht für dynamisch hinzugefügte Eingabegruppen

Question

Ich habe bereits Fragen zu diesem Thema und habe alles versucht, aber immer noch funktioniert meine keyup Funktion nicht.

$(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>

Dieser Code perfekt für die beiden Eingänge bereits im HTML-Teil funktioniert. Wenn ich auf die Schaltfläche "Weitere Optionen" klicke, wird das neue Feld hinzugefügt, aber das "Schlüsselwort" funktioniert nicht. In der Tat, wenn ich etwas auf den neuen hinzugefügten Eingaben eingeben, dann meine "Mehr Option" & "Submit" -Button wird deaktiviert (weiß wirklich nicht, warum das passiert).

Answer 1

Sie haben die Klasse pollOption zum input und nicht die div in Ihrem append hinzuzufügen:

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

statt: das hilft

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

Hoffnung.

$(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>