Keyup不適用於動態添加的輸入組

Question

我已經經歷了關於此主題的可用問題，並嘗試了一切，但仍然無法使用我的按鍵功能。

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

該代碼完全適用於已在HTML部分的兩個輸入。 當我點擊「更多選項」按鈕時，新的字段被添加，但「鍵盤」不起作用。 事實上，當我在新添加的輸入上輸入內容時，我的「更多選項」&「提交」按鈕被禁用（真的不知道爲什麼會發生這種情況）。

Answer 1

您對類pollOption添加到input，而不是div在追加：

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

相反的：

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

希望這有助於。

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