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
Post a Comment