Поведение событий изменения клонированного элемента

Question

У меня есть следующая проблема:

У меня есть поле, которое прослушивает изменения, которые происходят в поле, но когда этот объект клонируется, они переопределяют одно поле на другое, я имею в виду, если в одном поле, которое я выбираю 3 , отображает 3 , но если я выберу 4 в клонированном поле, оно отобразит 4 вместо 7 , почему? Я знаю, что сделал мелкую копию (plainObject), но в конце это должно быть так просто, как:

parseInt($('.selector')[0].value) + parseInt($('.selector')[1].value)

Там, где есть более 1 элемента.

Я подготовил скрипка : рабочая скрипка

Я никогда не сталкивался с клонированным объектом, я читал, что создание clone(true,true) приведет к глубокому клонированию с событиями и много но повезло не было, есть предложения или идеи ??

$(document).on("click", "#btnNewDistribution", function() {
  var distributionContainers = $("#DistributionContainers");
  var lastDistributionContainer = $(distributionContainers).children().last(".DistributionContainer");
  var newDistributionContainer = $(lastDistributionContainer).clone(true);
  $(newDistributionContainer).find(".ChildAgesContainer").empty();
  distributionContainers.append(newDistributionContainer);
});
$('.AmountField').on('change', function() {
  document.getElementById("habitacionesFiltroTop").innerHTML = this.value;
  calculoAmount();
});
calculoAmount = function() {
  for (var i = $('.well').length - 1; i == 0; i--) {
    if ((i - 1) > 0) {
      habitacionesFiltroTop.html(parseInt($('.form-control.AmountField')[i].value) + parseInt($('.form-control.AmountField')[i - 1].value));
    } else {
      habitacionesFiltroTop.html(parseInt($('.form-control.AmountField')[i].value));
    }
  }
}

<script src="https:////code.jquery.com/jquery-git.js"></script>
<fieldset id="DistributionContainers">
  <legend>Distribuciones</legend>
  <section class="col col-md-3 DistributionContainer">
    <div class="well">
      <div class="form-group">
        <a class="btn btn-danger pull-right btnDeleteDistribution" href="#" title="Quitar distribucion"><i class="fa fa-trash-o fa"></i></a>
      </div>
      <div class="form-group">
        <label class="control-label col-md-6">Habitaciones</label>
        <div class="col-md-6">
          <select class="formControl AmountField" type="number" min="1" max="5"><br><br>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
            <option value=4>4</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-6">Adultos</label>
        <div class="col-md-6">
          <select class="form-control AdultsField" type="number" defaultValue=2 min="1" max="10"><br><br>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
            <option value=4>4</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-6">Niños</label>
        <div class="col-md-6">
          <input class="form-control ChildsField" type="number" defaultValue=0 min="0" max="6"><br><br>
        </div>
      </div>
      <div class="form-group ChildAgesContainer">
      </div>
    </div>
  </section>
</fieldset>


<section class="col col-md-1">
  <div class="form-group">
    <a class="btn btn-primary" id="btnNewDistribution" href="#" title="Añadir distribución"><i class="fa fa-plus"> Add new Distri</i></a>

  </div>
</section>



<!--WHERE I WANNA PLACE THE RESULT OF SUM-->
<div class="col-lg-1 col-md-1 col-sm-1">
  Habitaciones:
  <output id="habitacionesFiltroTop">
    </output>
</div>

Большое спасибо !!

Answer 1

Проблема в том, что ваша логика c для суммирования значений всех элементов .AmoutField имеет недостатки. Во-первых, habitacionesFiltroTop является объектом Element, а не объектом jQuery, поэтому html() не будет работать. Во-вторых, вы можете использовать each() до l oop над всеми .AmountField элементами. Попробуйте это:

$(document).on("click", "#btnNewDistribution", function() {
  var $distributionContainers = $("#DistributionContainers");
  var $lastDistributionContainer = $distributionContainers.children().last(".DistributionContainer");
  var $newDistributionContainer = $lastDistributionContainer.clone(true);

  $newDistributionContainer.find(".ChildAgesContainer").empty();
  $distributionContainers.append($newDistributionContainer);
});

$('.AmountField').on('change', function() {
  var totalHabitaciones = 0;
  $('.AmountField').each((i, el) => totalHabitaciones += parseInt(el.value, 10) || 0);
  $('#habitacionesFiltroTop').text(totalHabitaciones);
}).trigger('change');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<fieldset id="DistributionContainers">
  <legend>Distribuciones</legend>
  <section class="col col-md-3 DistributionContainer">
    <div class="well">
      <div class="form-group">
        <a class="btn btn-danger pull-right btnDeleteDistribution" href="#" title="Quitar distribucion"><i class="fa fa-trash-o fa"></i></a>
      </div>
      <div class="form-group">
        <label class="control-label col-md-6">Habitaciones</label>
        <div class="col-md-6">
          <select class="formControl AmountField" type="number" min="1" max="5"><br><br>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
            <option value=4>4</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-6">Adultos</label>
        <div class="col-md-6">
          <select class="form-control AdultsField" type="number" defaultValue=2 min="1" max="10"><br><br>
            <option value=1>1</option>
            <option value=2>2</option>
            <option value=3>3</option>
            <option value=4>4</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="control-label col-md-6">Niños</label>
        <div class="col-md-6">
          <input class="form-control ChildsField" type="number" defaultValue=0 min="0" max="6"><br><br>
        </div>
      </div>
      <div class="form-group ChildAgesContainer">
      </div>
    </div>
  </section>
</fieldset>


<section class="col col-md-1">
  <div class="form-group">
    <a class="btn btn-primary" id="btnNewDistribution" href="#" title="Añadir distribución"><i class="fa fa-plus"> Add new Distri</i></a>

  </div>
</section>



<!--TOTAL HABITACIONES-->
<div class="col-lg-1 col-md-1 col-sm-1">
  Habitaciones:
  <output id="habitacionesFiltroTop">
   </output>
</div>