JavaScript验证不工作模式框中添加更多的按钮？

Question

我有模态按钮，其中包含的形式和表格包含添加更多按钮其中添加字段。问题是验证不工作里面添加更多按钮。

下面是我的代码： 的index.php

<a href="new_user_popup.php" style="color:white" target="_blank" data-toggle="modal" data-target="#myModal"> 

    <button type="button" class="btn btn-info new_entry_btn" style="margin-left:0%"> 
     New Entry 
    </button> 
    </a> 

<script type="text/javascript"> 
$(function(){ 

$('#trigger').click(function(){ 
    $('#myModal').modal('show'); 
    return false; 
}) 

}); 

$('#myModal').on('shown.bs.modal', function() { 
    $(this).find('.modal-dialog').css({width:'auto', 
           height:'auto', 
           'max-height':'100%'}); 
}); 
</script> 

<div class="container"> 


    <!-- Modal HTML --> 
    <div id="myModal" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <!-- Content will be loaded here from "remote.php" file --> 
      </div> 
     </div> 
    </div> 
</div> 
**new_user_popup.php** 

     <div class="col-md-8 col-sm-12 col-24"> 
      <div class="input_fields" style="color:black"> 
       <button class="add_field btn " onclick="incrementValue()" style="margin-left: 443px;">Add</button> 
       <div> 
       <input type="text" name="mytextt[]" hidden="" ></div> 
     </div> 
     </div> 

<script type="text/javascript"> 


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

       $('<div style="margin-left:50%;"><div class="form-group"><label class="control-label" for="selectbasic" style="margin-left:-220px;">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control" style="margin-left:17%;width:222%"><option value="Option one">Audit Report</option><option value="Option two">ITR filing</option><option value="Option three">VAT Filing</option><option value="Option four">Accounting</option><option value="Option five">Registration</option><option value="Option six">Certification</option><option value="Option seven">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label" for="selectbasic" style="margin-left:-29%">Status</label><div class="col-md-6"><select id="status11' + x + '" name="status[]" style="width:210%;margin-left:-1%;" 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><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label" style="margin-left:-15.5%;";">DATE</label><div class="col-8"><input class="form-control datepicker pick" id="datee' + x + '" name="date[]" value="<?php echo $_POST['date'] ?>" style="width:86%;margin-left:10.6%;margin-top:-10%;" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label" for="textinput" style="margin-left:-36%">Comment</label><div class="col-md-4"><input id="comments11' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md" style="width:342%;margin-left:20%"></div></div></center><a href="#" class="remove_field" style="margin-left: 197px; margin-top: -40px;position:absolute"><img src="images/del24.png"></a></a></div>').insertBefore(add_button) //add input box   
    var newInput=$("#datee"+ x).datepicker({dateFormat: 'dd/mm/yy'}); 
      newInput.datepicker({dateFormat: 'dd/mm/yy'}).datepicker("setDate", new Date()); 
      $("#status11" + x).click(function() { 

      if ($("#status11" + x).val() == "Completed") { 
       $("#comments11" + x).attr("required", "required"); 
      } 
      else 
       $("#comments11" + x).attr("required", false); 
     }); 

     } 
    }); 

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 

    $(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

    </script> 

Answer 1

由于该领域是自动生成的使用$（文件）的大部分时间尝试：

改变这种

$("#status11" + x).click(function() { 

      if ($("#status11" + x).val() == "Completed") { 
       $("#comments11" + x).attr("required", "required"); 
      } 
      else 
       $("#comments11" + x).attr("required", false); 
     }); 

     } 
    }); 

TO：

$(document).on('click',"#status11" + x,function() { 

      if ($(this).val().toLowerCase() == "completed") { 
       $("#comments11" + x).attr("required", "required"); 
      } 
      else{ 
       $("#comments11" + x).attr("required", false); 
      } 
    });/ 

//它应该是这样的

<script type="text/javascript"> 


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

       $('<div style="margin-left:50%;"><div class="form-group"><label class="control-label" for="selectbasic" style="margin-left:-220px;">Type of work</label><div class="col-md-6"><select id="type_of_work[]" name="type_of_work[]" class="form-control" style="margin-left:17%;width:222%"><option value="Option one">Audit Report</option><option value="Option two">ITR filing</option><option value="Option three">VAT Filing</option><option value="Option four">Accounting</option><option value="Option five">Registration</option><option value="Option six">Certification</option><option value="Option seven">Others</option></select></div></div><div class="form-group"> <label class="col-md-4 control-label" for="selectbasic" style="margin-left:-29%">Status</label><div class="col-md-6"><select id="status11' + x + '" name="status[]" style="width:210%;margin-left:-1%;" 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><div class="form-group row"><label for="example-date-input" class="col-2 col-form-label" style="margin-left:-15.5%;";">DATE</label><div class="col-8"><input class="form-control datepicker pick" id="datee' + x + '" name="date[]" value="<?php echo $_POST['date'] ?>" style="width:86%;margin-left:10.6%;margin-top:-10%;" type="text" readonly></div></div><div class="form-group"><label class="col-md-4 control-label" for="textinput" style="margin-left:-36%">Comment</label><div class="col-md-4"><input id="comments11' + x + '" name="comment[]" type="text" placeholder="" class="form-control input-md" style="width:342%;margin-left:20%"></div></div></center><a href="#" class="remove_field" style="margin-left: 197px; margin-top: -40px;position:absolute"><img src="images/del24.png"></a></a></div>').insertBefore(add_button) //add input box   
    var newInput=$("#datee"+ x).datepicker({dateFormat: 'dd/mm/yy'}); 
      newInput.datepicker({dateFormat: 'dd/mm/yy'}).datepicker("setDate", new Date()); 
     } 
    }); 


    $(document).on('click',"#status11" + x,function() { 

      if ($(this).val().toLowerCase() == "completed") { 
       $("#comments11" + x).attr("required", "required"); 
      } 
      else{ 
       $("#comments11" + x).attr("required", false); 
      } 
    }); 


    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 

    $(wrapper_pre1).on("click",".remove_field_pre1", function(e){ //user click on remove text 
     e.preventDefault(); $(this).parent('div').remove(); x--; 
    }) 
}); 

    </script>