Jquery problem with checkbox (dynamically) check selector - html

Question

I have a problem with jQuery. I have an html page with a form.
In my form I have a select:
<select class="form-control" id="macro_area" name="macro_area">
<option value="0">Select type</option>
<option value="1">test</option>
<option value="7">Other</option>
</select>
When I select an option, I load a php file with this jQuery function:
$('document').ready(function() {
$('#macro_area').on('change', function() {
request = $.ajax({
type: "POST",
url: "get_bus_act_subcat.php",
data: { id_macro_area: id_macro_area },
dataType: "html"
});
request.done(function(response) {
$(".act_subcat").html (response);
});
});
The procedure works correctly and adds html code (generated from the file get_bus_act_subcat.php) to the page, in a div (<div class="form-group act_subcat">) originally empty.
Code generated and inserted in page is similar to this:
<div class="form-check">
<div class="container">
<div class="row">
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_5" value="5">Test1
</div>
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_6" value="6">Test2
</div>
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_2" value="2">Test3
</div>
......
</div>
</div>
</div>
So the final result is:
<div class="form-group act_subcat"> //this div is present on page when load
<div class="form-check">
<div class="container">
<div class="row">
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_5" value="5">Test1
</div>
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_6" value="6">Test2
</div>
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_2" value="2">Test3
</div>
......
</div>
</div>
</div>
</div>
Now I have my problem... I want to check with jQuery if any of the checkboxes have been checked but standard solution/selector not function.
I think because the checkbox fields have been added later.
Any ideas or suggestions?
Thanks

Answer 1

Maybe the following is helpful to you?
$('.act_subcat').on('change','input',
function(ev){console.log(this.id+" was clicked and is"+(this.checked?"":" not")+" checked");}
)
$('document').ready(function(){
$('#macro_area').on('change', function(){
$(".act_subcat").html(insertHTML(this.value));
});
});
// substitute for AJAX:
function insertHTML(i){return `<div class="form-check">
<div class="container">
<div class="row">
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="5">Test${i++}
</div>
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="6">Test${i++}
</div>
<div class="col-sm-3">
<input type="checkbox" class="form-check-input" name="id_sub_cat[]" id="sub_cat_${i}" value="2">Test${i}
</div>
</div>
</div>
</div>`;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="macro_area" name="macro_area">
<option value="0">Select type</option>
<option value="1">test</option>
<option value="7">Other</option>
</select>
<div class="act_subcat"></div>
I replaced your AJAX part with another HTML-importing function. I demonstrate the event binding with an .on relative to the .act_subcat container. The function inside will fire whenever an input element in this container changes. And this will work for any dynamically added content. Try it out.

Answer 2

One approach you can take is to attach the event listener to the returned content prior to adding it to the page:
$(response).find(':checkbox').on('change', function() {
console.log( `Checkbox with id: ${this.id} was clicked` );
});
//then ... append it ......html( response );