Home » Jquery » javascript – Cloned element change events behaviour-Exceptionshub

javascript – Cloned element change events behaviour-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have a the follow problem:

I have a field that listens to changes that happen in a field, but when that object is cloned, them it overrides one field to another, I mean if in one field I choose 3, it displays 3, but if i choose 4 in the cloned field, them it displaya 4 instead of 7, why?
I know I have made a shallowcopy(plainObject) but at the end it should be as easy as:

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

Whereever there are more than 1 element.

I have prepared a fiddle: working fiddle

I have never faced to cloned object, I have read that making clone(true,true) will make a deep-cloning with events and a lot of but there was no lucky, any suggest or idea??

$(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!!

How to&Answer:

The issue is because your logic to sum the values of all the .AmoutField elements is flawed. Firstly habitacionesFiltroTop is an Element object, not a jQuery object, so html() won’t work. Secondly you can use each() to loop over all .AmountField elements. Try this:

$(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>