Question

我有动态创建的复选框，在每个克隆上我增加复选框的id并在检查该复选框后将相同的名称添加到我想要执行操作的div的类。
现在的问题是，当单击该新框时克隆带有新ID的复选框时，即使我在新旧复选框上都有相同的类，警报也不起作用。我还没有粘贴克隆js代码，但它的工作正确所有字段都被克隆了新的id和类。
这是复选框html和JS的片段。

＆＃13;

var chauffeur_index = $('.check_chauffer').length - 1;
$('.check_chauffer').last().attr('id', 'Chauffeur_details_' + chauffeur_index);
$('.Chauffeur_details').last().addClass('Chauffeur_details_' + chauffeur_index);

$(function() {
  $(".check_chauffer").change(function() {
    alert(this.id);
    if ($(this).is(":checked")) {
      $('.' + this.id).removeClass("hidden");
    } else {
      $('.' + this.id).addClass("hidden");
    }
  });
})

＆＃13;

.hidden {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<input type="checkbox" class="check_chauffer" id="Chauffeur_details_0" name="check_chauffer">Chauffeur
<div class="clearfix"></div>
<input type="checkbox" class="check_airport" name="check_airport" id="airport_details_0">Airport
<span class="help-block"></span>

<div class="Chauffeur_details_0 hidden">
  <div class="col-md-2 booking_details">
    <h6><strong>Booking Details:</strong></h6>
  </div>
  <div class="col-md-2">
    <label for="">Per Hour Rate</label>
    <div class="input-group">
      <input type="number" name="Chauffeur_per_hour_rate[]" class="form-control " required="required">
    </div>
  </div>
  <div class="col-md-2">
    <label for="">Min Hours/Day</label>
    <div class="input-group">
      <input type="number" name="Chauffeur_min_hours_booking[]" class="form-control " required="required">
    </div>
  </div>
  <div class="col-md-2">
    <label for="">Max Hours/Day</label>
    <div class="input-group">
      <input type="number" name="Chauffeur_max_hour_perday[]" class="form-control" required="required">
    </div>
  </div>
</div>

＆＃13;

如果需要其他代码，请问我。

Answer 1

您的第一个问题是，您应该向事件处理程序添加delegate。

.on()方法允许您将任何所需的事件处理程序委派给：当前元素，或者以后可能添加到DOM的任何未来元素。

$( document ).on( 'click', '.check_chauffer', function() {
    alert(this.id);
});

第二件事是确保将其添加到document.ready。

$( document ).ready(function() {
    $( document ).on( 'click', '.check_chauffer', function() {
        alert(this.id);
    });
});

Reference of direct-and-delegated-events

Answer 2

使用事件委派在dom元素中动态创建属性和元素。它允许我们为现在或将来存在的元素附加单个事件侦听器。在事件处理函数内部。

$(document).on('change', ".check_chauffer", function(){
    alert(this.id);
});

无法获取动态创建的复选框

2 个答案: