Cloned element change events behaviour

Question

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));
    }
  }
}



  Distribuciones
  
    
      
        
      
      
        Habitaciones
        
          
        
      
      
        Adultos
        
          
        
      
      
        Niños
        
          


        
      
      
      
    
  




  
     Add new Distri

  






  Habitaciones:

Thank you very much!!

Rory McCrossan · Accepted 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');



  Distribuciones
  
    
      
        
      
      
        Habitaciones
        
          
        
      
      
        Adultos
        
          
        
      
      
        Niños
        
          


        
      
      
      
    
  




  
     Add new Distri

  






  Habitaciones:

Cloned element change events behaviour

Answers (1)

Related Questions