Jquery来选择div(由Ajax调用添加)不起作用，但使用外部Ajax调用可以起作用

Question

我有一个自定义复选框，但我的问题是，当我用Ajax创建时，调用第二个div#test_checkbox_ajaxjquery来选择选中的输入不起作用，但第一个div#test_checkbox和它的jquery完全起作用。我需要使用Ajax调用创建div，因为我的大部分代码都使用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>

致以最诚挚的问候Amila Fernando

Answer 1

将事件处理程序附加到document或任何未使用ajax更新的适当父元素。请参阅on((文档页中的委派事件处理程序部分
例如，更改

$('#test_checkbox input').on('click', function() {  //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});

至

$(document).on('click','#test_checkbox input', function() {  //this work perfectly
console.log('enter');
if ($(this).is(":checked")) {
alert('checked');
} else {
alert('not checked');
}
});

编辑：
根据@WernerPotgieter的建议，将监听器附加到document而不是body。尽管我添加了一个将事件侦听器附加到文档的示例，但对于大型文档上的委托事件，我们应该避免过度使用文档或主体，并且必须将侦听器附加在尽可能靠近目标元素的位置，以获得更好的性能。