Sol Sol - 1 year ago 59
Javascript Question

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

So when the page loads it will check the checkbox and do a function if called. Once it loads the page, then the checkbox is not responsive and won't do anything after that point. The first drop down will load the

but the check boxes in
don't do anything.

How do you make a checkbox responsive within the second page that is loaded?


$('#modal123').on('', function (event) {
$('#allsites').on('change', function() {
$( "#test1" ).load( "test1.php" );


$("#California :checked").on("change", function(){
$( "#test1" ).load( "test2.php" );

}) //end modal
}); //end script


<div><a href="#"
class='btn btn-default'
<div id='integrate_employee_popup1'></div>
<!-- modal pop up for [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 class="modal-body">
<select id="allsites">
<option value="Site1">Site1</option>
<option value="Site2">Site2</option>

<div id="test1"></div>

<div id="test2"></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>



<?php print '<form>
<input type="checkbox" name="detailsgiven" id="California" >California
<input type="checkbox" name="detailsgiven" id="Georgia" >Georgia
</form>'; ?>


<?php print "Test2"; ?>

Answer Source

Use event delegation to create event listeners for elements that don't exist yet

$(document).on("change", "#California", function(){
       $( "#test1" ).load( "test2.php" );  
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download