时间戳

首页 > 解决方案 > 克隆的元素更改事件行为

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

问题描述

我有以下问题：

我有一个字段可以监听字段中发生的更改，但是当该对象被克隆时，它们会将一个字段覆盖到另一个字段，我的意思是如果在一个字段中我选择3 ，它会显示3，但是如果我在克隆的字段，它们显示4而不是7，为什么？我知道我做了一个 shallowcopy(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>

非常感谢你！！

标签： javascriptjqueryhtml

解决方案

问题是因为你对所有.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>

推荐阅读