时间戳

首页 > 解决方案 > Jquery 选择 div（由 Ajax 调用添加）不起作用，但没有 Ajax 调用它可以工作

jquery - Jquery 选择 div（由 Ajax 调用添加）不起作用，但没有 Ajax 调用它可以工作

问题描述

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

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

标签： jqueryhtmlcssajax

解决方案

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

推荐阅读