jquery选择div(由ajax调用添加)不起作用,但在没有ajax调用的情况下它起作用

我有一个自定义的复选框,但我的问题是当我使用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>

最好的问候阿米拉·费尔南多

将事件处理程序附加到 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的建议 文件 而不是 body . 尽管我添加了一个将事件侦听器附加到文档的示例,但我们应该避免在大型文档上过度使用文档或正文来处理委托事件,并且必须将侦听器附加到尽可能靠近目标元素的位置,以获得更好的性能。