I have a unique checkbox that I created using an Ajax call. The issue I'm facing is that the jQuery to select the checked input in the second div #test_checkbox_ajax isn't working, while it works perfectly fine in the first div #test_checkbox. Creating the div with Ajax call is essential for my code to function properly. How can I resolve this problem? Any assistance would be greatly appreciated. If you know of any similar questions, please let me know so I can find a solution. Thank you in advance.
$(window).load(function() {
$.when(loadProfile()).done(function(res){
addProfile(res);
}).fail(function(resp) {
if(resp.status!=408) {
//error
} else {
//other
}
});
});
$(document).ready(function() {
$('#test_checkbox input').on('click', function() { //this works perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
$('#test_checkbox_ajax input').on('click', function() { //this is not working, why??
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
});
function loadProfile() {
return $.ajax({
type: "POST",
url: "GESINTRANET",
data: "TPMAP=INSEGN"
});
}
function addProfile(res) {
$('#test_checkbox_ajax').empty();
$('#test_checkbox_ajax').append('<label class="custom_single_label">Area</label>');
$.each(res.aree, function(i, area) {
$('#test_checkbox_ajax').append('<label class="custom_single_checkbox_container">' + area.nome + '<input type="checkbox" class="custom_checkbox" value="' + area.id + '"><span class="custom_checkbox_span"></span></label>');
});
}/* custom input type: checkbox */
div.custom_checkbox_container {
padding: 15px 20px;
width: 100%;
position: relative !important;
top: 0 !important;
left: 0 !important;
}
div.custom_checkbox_container label.custom_single_label {
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #222222;
margin: 0;
}
... (additional CSS code here)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom_checkbox_container" id="test_checkbox">
<label class="custom_single_label">Vehicle</label>
<label class="custom_single_checkbox_container">Bike
<input type="checkbox" class="custom_checkbox" value="bike">
<span class="custom_checkbox_span"></span>
</label>
<label class="custom_single_checkbox_container">Car
<input type="checkbox" class="custom_checkbox" value="car">
<span class="custom_checkbox_span"></span>
</label>
</div>
<div class="custom_checkbox_container" id="test_checkbox_ajax">
</div>Warm Regards, Amila Fernando