動的に追加されたフィールドで検証が機能していませんか？

Question

私は、動的追加フィールドボタンを含むブートストラップモーダルボックスボタンを持っています。ボタンを追加すると表示されるフィールドでJavaScriptが機能しません。以下は

私のコードです：

の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

問題は、あなたが動的にDOM要素を追加した上でon()を使用sould、あります。

$(add_button).on('click', function (e) { 

Answer 2

Peterが言及しているように、動的に追加されたDOM要素にon（）を使用する必要があります。 JSがあなたの（＃status11 &＃comments11）セレクタで実行される必要があると思いますか？代わりの

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

：

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

Answer 3

あなたはon機能を備えた新しいフィールドにイベントリスナーを保つことができる、あなたはそれが書かれているかまで変更する必要があります。代わりに、このような機能を持つの

：

$('.my-field').on('click', function() {}); 

は、このような特定の子要素を監視する親要素を使用します。

$('.parent-container').on('click', '.my-field', function() {}); 

Answer 4

あなたはその中にAJAXとHTMLコンテンツをロードしています。あなたが使用しなければならないモーダルコンテンツ部門

$(document).ajaxComplete(function() { 
// do your .click which is interacting with the html in the dynamic loaded div 
}); 

$（文書）.ready