Question

我有一个自定义复选框，但是我的问题是，当我使用Ajax创建时，调用第二个div #test_checkbox_ajax jQuery选择选中的输入不起作用，但是第一个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 update更新的任何适当的父元素。请参阅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。尽管我添加了一个将事件侦听器附加到文档的示例，但我们应避免在大型文档上的委派事件中过度使用文档或主体，并且必须将侦听器附加到尽可能靠近目标元素的位置，以提高性能。

jQuery选择div（由Ajax调用添加）不起作用，但没有Ajax调用则起作用

1 个答案: