javascript - How can you have a persistent checkbox that opens or closes a div each time it is checked in JQuery? -


so when page loads check checkbox , function if called. once loads page, checkbox not responsive , won't after point. first drop down load test1.php check boxes in test1.php don't anything.

how make checkbox responsive within second page loaded?

 $(document).ready(function(){  $('#modal123').on('shown.bs.modal', function (event) {     $('#allsites').on('change', function() {         //alert("test");     $( "#test1" ).load( "test1.php" );        });  $("#california :checked").on("change", function(){     $( "#test1" ).load( "test2.php" );   });      }) //end modal }); //end script 

html:

<body>  <div><a href="#" class='btn btn-default'  role='button'  data-toggle='modal'  data-target='#modal123' >modal1</a> </div>                                                     <div id='integrate_employee_popup1'></div>                        <!-- modal pop [view audits] button --> <div class="modal fade" style="z-index:10000" id="modal123" role="dialog">     <div class="modal-dialog modal-lg">         <div class="modal-content">             <div class="modal-header">             <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>             <h4 class="modal-title">view car</h4>             </div>             <div class="modal-body">                 <select id="allsites">                   <option value="site1">site1</option>                   <option value="site2">site2</option>                 </select>                   <div id="test1"></div>                    <div id="test2"></div>               </div>             <div class="modal-footer">             <form method = "post">                 <input type="button" id="yes_delete" value="yes " name="view_audits_delete" />                 <button type="button" class="btn btn-default" data-dismiss="modal">no</button>             </form>                  </div>         </div>       </div> </div>     </body> </html> 

test1.php

<?php print '<form>   <input type="checkbox" name="detailsgiven" id="california" >california   <br>   <input type="checkbox" name="detailsgiven" id="georgia" >georgia   <br> </form>'; ?> 

test2.php

<?php print "test2"; ?> 

use event delegation create event listeners elements don't exist yet

$(document).on("change", "#california", function(){     if(this.checked){        $( "#test1" ).load( "test2.php" );       } }); 

Comments