我有一个自定义的复选框,但我的问题是当我使用ajax创建时,调用第二个div
#test_checkbox_ajax
jquery选择选中的输入不起作用,但是第一个div
#test_checkbox
而且jquery工作得很好。我需要div使用ajax调用创建,因为我的大多数代码都使用ajax调用。我该怎么解决?有人能帮我吗?如果有类似的问题,你能转告我,以便我能设法得到解决办法。提前非常感谢。
$(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>
最好的问候
阿米拉·费尔南多