Jquery to select div (added by Ajax call) not work but with out Ajax call it works
2
I've got a custom checkbox but my problem is that when I create with Ajax call the second div #test_checkbox_ajax jquery to select the checked input doesn't work, but the first div #test_checkbox and it's Jquery work perfectly. I need that the div create with Ajax call because most of my code work with Ajax call. How can I solve this? Anyone can help me please? if there is some question similar can you repot me so that I can try to get the solution. Thank You Very Much 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 work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
$('#test_checkbox_ajax input').on('click', function() { //this not work 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;
}
div.custom_checkbox_container label.custom_single_checkbox_container {
display: block;
position: relative;
padding-left: 20px;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #222222;
-moz-user-select: none; /* firefox 4.0+ */
-o-user-select: none; /* Opera 10.5+ */
-webkit-user-select: none; /* Safari 3.1+ & Chrome 4.0+ */
-ms-user-select: none;
user-select: none;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 15px;
width: 15px;
top: 3px;
left: 0;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span {
position: absolute;
top: 3px;
left: 0;
height: 15px;
width: 15px;
background-color: #ffffff;
border: 1px solid #d4d7d9;
pointer-events: none;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-moz-transform: rotate(45deg); /* firefox 4.0+ */
-o-transform: rotate(45deg); /* Opera 10.5+ */
-webkit-transform: rotate(45deg); /* Safari 3.1+ & Chrome 4.0+ */
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
content: "";
position: absolute;
display: none;
}
div.custom_checkbox_containerlabel.custom_single_checkbox_container input.custom_checkbox ~ span.custom_checkbox_span {
background-color: #ccc;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span {
background-color: #1a4c7f;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span:after {
display: block;
}<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>Best Regards
Amila Fernando
jquery html css ajax
edited Nov 16 '18 at 9:32
Shubham Jain
674821
asked Nov 16 '18 at 9:16
Amila Fernando 92Amila Fernando 92
132
add a comment |
2
I've got a custom checkbox but my problem is that when I create with Ajax call the second div #test_checkbox_ajax jquery to select the checked input doesn't work, but the first div #test_checkbox and it's Jquery work perfectly. I need that the div create with Ajax call because most of my code work with Ajax call. How can I solve this? Anyone can help me please? if there is some question similar can you repot me so that I can try to get the solution. Thank You Very Much 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 work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
$('#test_checkbox_ajax input').on('click', function() { //this not work 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;
}
div.custom_checkbox_container label.custom_single_checkbox_container {
display: block;
position: relative;
padding-left: 20px;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #222222;
-moz-user-select: none; /* firefox 4.0+ */
-o-user-select: none; /* Opera 10.5+ */
-webkit-user-select: none; /* Safari 3.1+ & Chrome 4.0+ */
-ms-user-select: none;
user-select: none;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 15px;
width: 15px;
top: 3px;
left: 0;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span {
position: absolute;
top: 3px;
left: 0;
height: 15px;
width: 15px;
background-color: #ffffff;
border: 1px solid #d4d7d9;
pointer-events: none;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-moz-transform: rotate(45deg); /* firefox 4.0+ */
-o-transform: rotate(45deg); /* Opera 10.5+ */
-webkit-transform: rotate(45deg); /* Safari 3.1+ & Chrome 4.0+ */
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
content: "";
position: absolute;
display: none;
}
div.custom_checkbox_containerlabel.custom_single_checkbox_container input.custom_checkbox ~ span.custom_checkbox_span {
background-color: #ccc;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span {
background-color: #1a4c7f;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span:after {
display: block;
}<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>Best Regards
Amila Fernando
jquery html css ajax
edited Nov 16 '18 at 9:32
Shubham Jain
674821
asked Nov 16 '18 at 9:16
Amila Fernando 92Amila Fernando 92
132
Here issue it that loadProfile method inject the input tag where you intended to add the event which is called on load, but you are assigning events on elements in "onReady" which triggers before onLoad. So while assigning events dom is not populated and listeners are not assigned.
– jeshu911
Nov 16 '18 at 9:28
add a comment |
2
2
2
I've got a custom checkbox but my problem is that when I create with Ajax call the second div #test_checkbox_ajax jquery to select the checked input doesn't work, but the first div #test_checkbox and it's Jquery work perfectly. I need that the div create with Ajax call because most of my code work with Ajax call. How can I solve this? Anyone can help me please? if there is some question similar can you repot me so that I can try to get the solution. Thank You Very Much 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 work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
$('#test_checkbox_ajax input').on('click', function() { //this not work 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;
}
div.custom_checkbox_container label.custom_single_checkbox_container {
display: block;
position: relative;
padding-left: 20px;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #222222;
-moz-user-select: none; /* firefox 4.0+ */
-o-user-select: none; /* Opera 10.5+ */
-webkit-user-select: none; /* Safari 3.1+ & Chrome 4.0+ */
-ms-user-select: none;
user-select: none;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 15px;
width: 15px;
top: 3px;
left: 0;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span {
position: absolute;
top: 3px;
left: 0;
height: 15px;
width: 15px;
background-color: #ffffff;
border: 1px solid #d4d7d9;
pointer-events: none;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-moz-transform: rotate(45deg); /* firefox 4.0+ */
-o-transform: rotate(45deg); /* Opera 10.5+ */
-webkit-transform: rotate(45deg); /* Safari 3.1+ & Chrome 4.0+ */
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
content: "";
position: absolute;
display: none;
}
div.custom_checkbox_containerlabel.custom_single_checkbox_container input.custom_checkbox ~ span.custom_checkbox_span {
background-color: #ccc;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span {
background-color: #1a4c7f;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span:after {
display: block;
}<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>Best Regards
Amila Fernando
jquery html css ajax
edited Nov 16 '18 at 9:32
Shubham Jain
674821
asked Nov 16 '18 at 9:16
Amila Fernando 92Amila Fernando 92
132
I've got a custom checkbox but my problem is that when I create with Ajax call the second div #test_checkbox_ajax jquery to select the checked input doesn't work, but the first div #test_checkbox and it's Jquery work perfectly. I need that the div create with Ajax call because most of my code work with Ajax call. How can I solve this? Anyone can help me please? if there is some question similar can you repot me so that I can try to get the solution. Thank You Very Much 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 work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
$('#test_checkbox_ajax input').on('click', function() { //this not work 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;
}
div.custom_checkbox_container label.custom_single_checkbox_container {
display: block;
position: relative;
padding-left: 20px;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #222222;
-moz-user-select: none; /* firefox 4.0+ */
-o-user-select: none; /* Opera 10.5+ */
-webkit-user-select: none; /* Safari 3.1+ & Chrome 4.0+ */
-ms-user-select: none;
user-select: none;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 15px;
width: 15px;
top: 3px;
left: 0;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span {
position: absolute;
top: 3px;
left: 0;
height: 15px;
width: 15px;
background-color: #ffffff;
border: 1px solid #d4d7d9;
pointer-events: none;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-moz-transform: rotate(45deg); /* firefox 4.0+ */
-o-transform: rotate(45deg); /* Opera 10.5+ */
-webkit-transform: rotate(45deg); /* Safari 3.1+ & Chrome 4.0+ */
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
content: "";
position: absolute;
display: none;
}
div.custom_checkbox_containerlabel.custom_single_checkbox_container input.custom_checkbox ~ span.custom_checkbox_span {
background-color: #ccc;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span {
background-color: #1a4c7f;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span:after {
display: block;
}<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>Best Regards
Amila Fernando
$(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 work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
$('#test_checkbox_ajax input').on('click', function() { //this not work 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;
}
div.custom_checkbox_container label.custom_single_checkbox_container {
display: block;
position: relative;
padding-left: 20px;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #222222;
-moz-user-select: none; /* firefox 4.0+ */
-o-user-select: none; /* Opera 10.5+ */
-webkit-user-select: none; /* Safari 3.1+ & Chrome 4.0+ */
-ms-user-select: none;
user-select: none;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 15px;
width: 15px;
top: 3px;
left: 0;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span {
position: absolute;
top: 3px;
left: 0;
height: 15px;
width: 15px;
background-color: #ffffff;
border: 1px solid #d4d7d9;
pointer-events: none;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-moz-transform: rotate(45deg); /* firefox 4.0+ */
-o-transform: rotate(45deg); /* Opera 10.5+ */
-webkit-transform: rotate(45deg); /* Safari 3.1+ & Chrome 4.0+ */
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
content: "";
position: absolute;
display: none;
}
div.custom_checkbox_containerlabel.custom_single_checkbox_container input.custom_checkbox ~ span.custom_checkbox_span {
background-color: #ccc;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span {
background-color: #1a4c7f;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span:after {
display: block;
}<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>$(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 work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
$('#test_checkbox_ajax input').on('click', function() { //this not work 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;
}
div.custom_checkbox_container label.custom_single_checkbox_container {
display: block;
position: relative;
padding-left: 20px;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #222222;
-moz-user-select: none; /* firefox 4.0+ */
-o-user-select: none; /* Opera 10.5+ */
-webkit-user-select: none; /* Safari 3.1+ & Chrome 4.0+ */
-ms-user-select: none;
user-select: none;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
height: 15px;
width: 15px;
top: 3px;
left: 0;
margin: 0;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span {
position: absolute;
top: 3px;
left: 0;
height: 15px;
width: 15px;
background-color: #ffffff;
border: 1px solid #d4d7d9;
pointer-events: none;
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
left: 4px;
top: 1px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-moz-transform: rotate(45deg); /* firefox 4.0+ */
-o-transform: rotate(45deg); /* Opera 10.5+ */
-webkit-transform: rotate(45deg); /* Safari 3.1+ & Chrome 4.0+ */
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
div.custom_checkbox_container label.custom_single_checkbox_container span.custom_checkbox_span:after {
content: "";
position: absolute;
display: none;
}
div.custom_checkbox_containerlabel.custom_single_checkbox_container input.custom_checkbox ~ span.custom_checkbox_span {
background-color: #ccc;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span {
background-color: #1a4c7f;
}
div.custom_checkbox_container label.custom_single_checkbox_container input.custom_checkbox:checked ~ span.custom_checkbox_span:after {
display: block;
}<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>jquery html css ajax
jquery html css ajax
edited Nov 16 '18 at 9:32
Shubham Jain
674821
asked Nov 16 '18 at 9:16
Amila Fernando 92Amila Fernando 92
132
edited Nov 16 '18 at 9:32
Shubham Jain
674821
asked Nov 16 '18 at 9:16
Amila Fernando 92Amila Fernando 92
132
edited Nov 16 '18 at 9:32
Shubham Jain
674821
edited Nov 16 '18 at 9:32
Shubham Jain
674821
edited Nov 16 '18 at 9:32
Shubham Jain
674821
674821
asked Nov 16 '18 at 9:16
Amila Fernando 92Amila Fernando 92
132
asked Nov 16 '18 at 9:16
Amila Fernando 92Amila Fernando 92
132
asked Nov 16 '18 at 9:16
Amila Fernando 92Amila Fernando 92
132
132
Here issue it that loadProfile method inject the input tag where you intended to add the event which is called on load, but you are assigning events on elements in "onReady" which triggers before onLoad. So while assigning events dom is not populated and listeners are not assigned.
– jeshu911
Nov 16 '18 at 9:28
add a comment |
Here issue it that loadProfile method inject the input tag where you intended to add the event which is called on load, but you are assigning events on elements in "onReady" which triggers before onLoad. So while assigning events dom is not populated and listeners are not assigned.
– jeshu911
Nov 16 '18 at 9:28
Here issue it that loadProfile method inject the input tag where you intended to add the event which is called on load, but you are assigning events on elements in "onReady" which triggers before onLoad. So while assigning events dom is not populated and listeners are not assigned.
– jeshu911
Nov 16 '18 at 9:28
Here issue it that loadProfile method inject the input tag where you intended to add the event which is called on load, but you are assigning events on elements in "onReady" which triggers before onLoad. So while assigning events dom is not populated and listeners are not assigned.
– jeshu911
Nov 16 '18 at 9:28
add a comment |
1 Answer
1
active
oldest
votes
3
Attach your event handler to the document or any appropriate parent element which is not being updated with ajax update. Refer Delegated event handlers section in on() documentation page.
For example, change
$('#test_checkbox input').on('click', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
to
$(document).on('click','#test_checkbox input', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
Edit:
As per the suggestion of @WernerPotgieter attached listener to document instead of body. Though I have added an example with event listener attached to document we should avoid excessive use of document or body for delegated events on large documents and must attach the listener to a location as close as possible to the target element for better performance.
answered Nov 16 '18 at 9:33
Aditya SharmaAditya Sharma
5131620
just change$('body')to$(document)
– Werner Potgieter
Nov 16 '18 at 9:38
@WernerPotgieter Makes sense but attaching many delegated event handlers to the document may degrade performance. Each time the event occurs, jQuery compares all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. Though I have added an example for the body we should avoid excessive use of document or body for delegated events on large documents.
– Aditya Sharma
Nov 16 '18 at 11:25
Yes, I agree with what you are saying. But there is no difference between the two in the end. He can always just create the event listener when he generates the HTML. Or if need be to turn off the event listener when it is not needed anymore. There is a lot of ways around this.
– Werner Potgieter
Nov 17 '18 at 14:48
Agreed. Updated the answer.
– Aditya Sharma
Nov 18 '18 at 13:19
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334720%2fjquery-to-select-div-added-by-ajax-call-not-work-but-with-out-ajax-call-it-wor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
3
Attach your event handler to the document or any appropriate parent element which is not being updated with ajax update. Refer Delegated event handlers section in on() documentation page.
For example, change
$('#test_checkbox input').on('click', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
to
$(document).on('click','#test_checkbox input', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
Edit:
As per the suggestion of @WernerPotgieter attached listener to document instead of body. Though I have added an example with event listener attached to document we should avoid excessive use of document or body for delegated events on large documents and must attach the listener to a location as close as possible to the target element for better performance.
answered Nov 16 '18 at 9:33
Aditya SharmaAditya Sharma
5131620
just change$('body')to$(document)
– Werner Potgieter
Nov 16 '18 at 9:38
@WernerPotgieter Makes sense but attaching many delegated event handlers to the document may degrade performance. Each time the event occurs, jQuery compares all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. Though I have added an example for the body we should avoid excessive use of document or body for delegated events on large documents.
– Aditya Sharma
Nov 16 '18 at 11:25
Yes, I agree with what you are saying. But there is no difference between the two in the end. He can always just create the event listener when he generates the HTML. Or if need be to turn off the event listener when it is not needed anymore. There is a lot of ways around this.
– Werner Potgieter
Nov 17 '18 at 14:48
Agreed. Updated the answer.
– Aditya Sharma
Nov 18 '18 at 13:19
add a comment |
3
Attach your event handler to the document or any appropriate parent element which is not being updated with ajax update. Refer Delegated event handlers section in on() documentation page.
For example, change
$('#test_checkbox input').on('click', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
to
$(document).on('click','#test_checkbox input', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
Edit:
As per the suggestion of @WernerPotgieter attached listener to document instead of body. Though I have added an example with event listener attached to document we should avoid excessive use of document or body for delegated events on large documents and must attach the listener to a location as close as possible to the target element for better performance.
answered Nov 16 '18 at 9:33
Aditya SharmaAditya Sharma
5131620
just change$('body')to$(document)
– Werner Potgieter
Nov 16 '18 at 9:38
@WernerPotgieter Makes sense but attaching many delegated event handlers to the document may degrade performance. Each time the event occurs, jQuery compares all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. Though I have added an example for the body we should avoid excessive use of document or body for delegated events on large documents.
– Aditya Sharma
Nov 16 '18 at 11:25
Yes, I agree with what you are saying. But there is no difference between the two in the end. He can always just create the event listener when he generates the HTML. Or if need be to turn off the event listener when it is not needed anymore. There is a lot of ways around this.
– Werner Potgieter
Nov 17 '18 at 14:48
Agreed. Updated the answer.
– Aditya Sharma
Nov 18 '18 at 13:19
add a comment |
3
3
3
Attach your event handler to the document or any appropriate parent element which is not being updated with ajax update. Refer Delegated event handlers section in on() documentation page.
For example, change
$('#test_checkbox input').on('click', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
to
$(document).on('click','#test_checkbox input', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
Edit:
As per the suggestion of @WernerPotgieter attached listener to document instead of body. Though I have added an example with event listener attached to document we should avoid excessive use of document or body for delegated events on large documents and must attach the listener to a location as close as possible to the target element for better performance.
answered Nov 16 '18 at 9:33
Aditya SharmaAditya Sharma
5131620
Attach your event handler to the document or any appropriate parent element which is not being updated with ajax update. Refer Delegated event handlers section in on() documentation page.
For example, change
$('#test_checkbox input').on('click', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
to
$(document).on('click','#test_checkbox input', function() { //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});
Edit:
As per the suggestion of @WernerPotgieter attached listener to document instead of body. Though I have added an example with event listener attached to document we should avoid excessive use of document or body for delegated events on large documents and must attach the listener to a location as close as possible to the target element for better performance.
answered Nov 16 '18 at 9:33
Aditya SharmaAditya Sharma
5131620
edited Nov 18 '18 at 13:18
answered Nov 16 '18 at 9:33
Aditya SharmaAditya Sharma
5131620
answered Nov 16 '18 at 9:33
Aditya SharmaAditya Sharma
5131620
answered Nov 16 '18 at 9:33
Aditya SharmaAditya Sharma
5131620
5131620
just change$('body')to$(document)
– Werner Potgieter
Nov 16 '18 at 9:38
@WernerPotgieter Makes sense but attaching many delegated event handlers to the document may degrade performance. Each time the event occurs, jQuery compares all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. Though I have added an example for the body we should avoid excessive use of document or body for delegated events on large documents.
– Aditya Sharma
Nov 16 '18 at 11:25
Yes, I agree with what you are saying. But there is no difference between the two in the end. He can always just create the event listener when he generates the HTML. Or if need be to turn off the event listener when it is not needed anymore. There is a lot of ways around this.
– Werner Potgieter
Nov 17 '18 at 14:48
Agreed. Updated the answer.
– Aditya Sharma
Nov 18 '18 at 13:19
add a comment |
just change$('body')to$(document)
– Werner Potgieter
Nov 16 '18 at 9:38
@WernerPotgieter Makes sense but attaching many delegated event handlers to the document may degrade performance. Each time the event occurs, jQuery compares all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. Though I have added an example for the body we should avoid excessive use of document or body for delegated events on large documents.
– Aditya Sharma
Nov 16 '18 at 11:25
Yes, I agree with what you are saying. But there is no difference between the two in the end. He can always just create the event listener when he generates the HTML. Or if need be to turn off the event listener when it is not needed anymore. There is a lot of ways around this.
– Werner Potgieter
Nov 17 '18 at 14:48
Agreed. Updated the answer.
– Aditya Sharma
Nov 18 '18 at 13:19
just change
$('body') to $(document)– Werner Potgieter
Nov 16 '18 at 9:38
just change
$('body') to $(document)– Werner Potgieter
Nov 16 '18 at 9:38
@WernerPotgieter Makes sense but attaching many delegated event handlers to the document may degrade performance. Each time the event occurs, jQuery compares all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. Though I have added an example for the body we should avoid excessive use of document or body for delegated events on large documents.
– Aditya Sharma
Nov 16 '18 at 11:25
@WernerPotgieter Makes sense but attaching many delegated event handlers to the document may degrade performance. Each time the event occurs, jQuery compares all selectors of all attached events of that type to every element in the path from the event target up to the top of the document. Though I have added an example for the body we should avoid excessive use of document or body for delegated events on large documents.
– Aditya Sharma
Nov 16 '18 at 11:25
Yes, I agree with what you are saying. But there is no difference between the two in the end. He can always just create the event listener when he generates the HTML. Or if need be to turn off the event listener when it is not needed anymore. There is a lot of ways around this.
– Werner Potgieter
Nov 17 '18 at 14:48
Yes, I agree with what you are saying. But there is no difference between the two in the end. He can always just create the event listener when he generates the HTML. Or if need be to turn off the event listener when it is not needed anymore. There is a lot of ways around this.
– Werner Potgieter
Nov 17 '18 at 14:48
Agreed. Updated the answer.
– Aditya Sharma
Nov 18 '18 at 13:19
Agreed. Updated the answer.
– Aditya Sharma
Nov 18 '18 at 13:19
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53334720%2fjquery-to-select-div-added-by-ajax-call-not-work-but-with-out-ajax-call-it-wor%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Here issue it that loadProfile method inject the input tag where you intended to add the event which is called on load, but you are assigning events on elements in "onReady" which triggers before onLoad. So while assigning events dom is not populated and listeners are not assigned.
– jeshu911
Nov 16 '18 at 9:28