Jquery для выбора div (добавленный вызовом Ajax) не работает, но без вызова Ajax это работает

Question

У меня есть пользовательский флажок, но моя проблема в том, что при создании с помощью 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>

С наилучшими пожеланиями Амила Фернандо

Answer 1

Присоедините ваш обработчик событий к document или любому подходящему родительскому элементу, который не обновляется при обновлении ajax. См. Раздел Делегированные обработчики событий в на () странице документации.
Например, изменить

$('#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');
    }
  });

Edit:
Согласно предложению @WernerPotgieter прикрепленный слушатель к document вместо body. Хотя я добавил пример со слушателем событий, прикрепленным к документу, мы должны избегать чрезмерного использования документа или тела для делегированных событий в больших документах и ​​должны прикреплять слушателя к как можно ближе к целевому элементу для лучшей производительности.