Jquery to select div (added by Ajax call) not work but with out Ajax call it works

user_10657548 0
Viewed 66

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

css html jquery ajax
1 Answers

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.

user_71303710
Related