javascript - 克隆元素更改事件行为

Question

我有以下问题:

我有一个字段，它监听字段中发生的更改，但是当克隆该对象时，它会将一个字段覆盖到另一个字段，我的意思是，如果在一个字段中我选择3，它显示 3，但如果我在克隆字段中选择 4，它们会显示 4 而不是 7，为什么？我知道我已经做了一个shallowcopy(plainObject)，但最后它应该很简单:

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

只要有超过 1 个元素。

我准备了一个 fiddle :working fiddle

我从来没有面对过克隆的对象，我读过，制作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>

Thank you very much!!

Answer 1

问题是因为您对所有 .AmoutField 元素的值求和的逻辑存在缺陷。首先，habitacionesFiltroTop 是一个 Element 对象，而不是 jQuery 对象，因此 html() 不起作用。其次，您可以使用 each() 循环遍历所有 .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>