ドロップダウンメニューとコメントフィールドを含むボタンを追加すると、JavaScriptが機能しない

Question

問題は、ボタンを追加するには、ドロップダウンメニューとコメントフィールドの2つのフィールドがあります。ドロップダウンメニューを選択すると、コメント欄が必要になります。 JavaScriptは、[追加]ボタンの内側にないフィールドで正常に動作しています。以下は

私のコードです：

HTML

<form class="form-horizontal" method="post" action="new.php"> 
    <!-- Select Basic --> 
    <div class="form-group"> 
     <label class="col-md-4 control-label" for="selectbasic">Status</label> 
     <div class="col-md-4"> 
      <select id="status" name="status[]" class="form-control" > 
       <option value="Pending">Pending</option> 
       <option value="Work in process">Work in process</option> 
       <option value="Completed">Completed</option> 
      </select> 
     </div> 
    </div> 

    <!-- Text input--> 
    <div class="form-group"> 
     <label class="col-md-4 control-label" for="textinput">Comment</label> 
     <div class="col-md-4"> 
      <input id="commentss" name="comment[]" type="text" placeholder="" class="form-control input-md" /> 
     </div> 
    </div> 

    <div class="input_fields" style="color:black"> 
     <button class="add_field btn " onclick="incrementValue()" >Add More</button> 
    <div> 

    <input type="text" name="mytextt[]" hidden="" > 
</div> 
</div> 
</div> 

<button id="save_btn" name="save_btn" type="submit" onclick="validate();" class="btn btn-success" >Save</button> 
</form> 

はJavaScript：

<script type="text/javascript"> 
    function validate() { 
     var input=document.getElementById("status"); 
     var comm=document.getElementById('commentss') 
     var inputelement=input.value; 

     if (inputelement=="Completed") { 
      comm.required=true; 
     } 
     else { 
      comm.required=false; 
     } 

    } 
</script> 

$(document).ready(function() { 
    var max_fields  = 10; //maximum input boxes allowed 
    var wrapper   = $(".input_fields"); //Fields wrapper 
    var add_button  = $(".add_field"); //Add button ID 
    var wrapper_pre1   = $(".present_fields_1"); //Fields wrapper 
    var x = 1; //initlal text box count 

    $(add_button).click(function(e){ //on add input button click 
    e.preventDefault(); 

    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     $(wrapper).prepend('<div class="form-group"> <label class="col-md-4 control-label status" for="selectbasic" style="">Status</label><div class="col-md-6"><select id="status" name="status[]" class="form-control status"><option value="Pending">Pending</option><option value="Work in process">Work in process</option><option value="Completed">Completed</option></select></div></div><div class="form-group"><label class="col-md-4 control-label comment" for="textinput" style="">Comment</label><div class="col-md-4"><input id="comments" name="comment[]" type="text" placeholder="" class="form-control input-md comment" style=""></div></div>') 
    } 
}); 

Answer 1

あなたは$で二度の要素をラップしています。 $（add_button）と$（wrapper）は定義されていないため、スクリプトの実行が強制的に停止されます。クリックハンドラーは次のようにする必要があります。

add_button.click(function(e){ //on add input button click 
    e.preventDefault(); 

    if (x < max_fields) { //max input box allowed 
     x++; //text box increment 
     wrapper.prepend(...); 
    } 
});