Activate JS functionality on clone two inputs fields

Question

i have a form with various fields, and a pair of buttons of clone and remove the cloned part of the form.

Also, i have in those fields a pair of inputs of integers that when i click in one of them the value "jump" to the other field when clicked.

The problem is when i clone the form the functionality of "jump" do not attach to the other cloned inputs.

this is the clone function :

  var regex = /^(.+?)(\d+)$/i;
var cloneIndex = 1;//$(".clonedInput").length;

function clone(){
    cloneIndex++;
    $(this).parents(".clonedInput").clone()
        .appendTo("form")
        .attr("id", "clonedInput" +  cloneIndex)
        .find("*")
        .each(function() {
            var id = this.id || "";
            var match = id.match(regex) || [];


            if (match.length == 3) {
                this.id = match[1] + (cloneIndex);
                //console.log(this.val);

                //this.value = $(match).val();
                //console.log("El valor seleccionado es ");
                //this.val = match[1].val;
            }
        })
        .on('click', 'button.clone', clone)
        .on('click', 'button.remove', remove);
    return false;
}


function remove(){
  if($('.actions').length == 2){
    console.log('accion cancelada');
  }else{
    $(this).parents(".clonedInput").remove();        
  }
  return false;
}
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);

an approach to this was made with this code using dinamicaly for php

$("input[id^='montoa']").on("click",  function(e){
    var montoa_id = this.id;
    var montob_id = 'montob'+montoa_id.match(/(\d+)/g)[0];


    $('#'+montoa_id).value = $('#'+montob_id).val();
    $('#'+montob_id).value = '';  


});

the inputs are this :

 <div class="col-md-1">
     <input type="text" name="monto[]" class="form-control" id="montoa1" placeholder="Debe">
    </div>
    <div class="col-md-1">
      <input type="text" name="monto[]" class="form-control" id="montob1" placeholder="Haber">
    </div>

and all the n-cloned fields are numbered by auto-increase the id like id="montoa2" and id="montob3" and so on.

all comments wil be very appreciated.

EDIT : Create a jsfiddle https://jsfiddle.net/o63c61sj/

hi alive, the remove function are now working. So I can't apply the `$("input[id^='montoa']").on("click", function(e){ ... });` to the fields added by clone ... — stev, May 26 '18 at 04:40
i made a complete test with all working code with the same result. — stev, May 26 '18 at 04:52
i made a jsfiddle for you understanding (https://jsfiddle.net/steven/qd9ua7ey/) — stev, May 26 '18 at 05:18
duplicate of `https://stackoverflow.com/questions/9549643/jquery-clone-not-cloning-event-bindings-even-with-on` — stev, May 29 '18 at 22:10

stev · Answer 1 · 2018-05-26T23:56:11.627

today solved !

This time was add a param to a .clone() function

This because this is a deepWithDataAndEvent clonation event as jquery says.

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

The solution this time for me was clone(true).

Hope someone else could be useful. `

$(document).ready(function() {

    $("input[id^='montoa']").attr("placeholder", "dollars");
    $("input[id^='montob']").attr("placeholder", "dollars");


    $("#montoa1").on('click', function() {
      var montoa = $('#montoa1').val();
      $('#montoa1').val($('#montob1').val());
      $('#montob1').val(0);
    });
    $("#montob1").on('click', function() {
      var montoa = $('#montoa1').val();
      $('#montoa1').val(0);
      $('#montob1').val(montoa);
    });




  }

  /*
      $("input[id^='montoa']").on("click",  function(e){
        var montoa_id = this.id;
        var montob_id = 'montob'+montoa_id.match(/(\d+)/g)[0];

     
          $('#'+montoa_id).value = $('#'+montob_id).val();
          $('#'+montob_id).value = '';  
      

      });
      $("input[id^='montob']").click(function(){
        console.log(this.id);
      });
  */
);


var regex = /^(.+?)(\d+)$/i;
var cloneIndex = 1; //$(".clonedInput").length;


function clone() {
  cloneIndex++;
  $(this).parents(".clonedInput").clone(true)
    .appendTo("form")
    .attr("id", "clonedInput" + cloneIndex)
    .find("*")
    .each(function() {
      var id = this.id || "";
      var match = id.match(regex) || [];



      if (match.length == 3) {
        this.id = match[1] + (cloneIndex);
      }
    })
    .on('click', 'button.clone', clone)
    .on('click', 'button.remove', remove);
  return false;
}


function remove() {
  if ($('.actions').length == 2) {
    console.log('accion cancelada');
  } else {
    $(this).parents(".clonedInput").remove();
  }
  return false;
}
$("button.clone").on("click", clone);
$("button.remove").on("click", remove);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<form action="#" method="post">
  <div id="clonedInput1" class="clonedInput">
    <div class="form-group row">
      <div class="actions">
        <div class="panel-group">
          <div class="panel panel-primary">
            <div class="panel-heading">
              <div class="actions">
                <button class="clone btn btn-success">Duplicar</button>
                <button class="remove btn btn-warning">Quitar</button>
              </div>
            </div>
            <div class="panel-body">
              <div class="form-group row">
                <div class="col-md-2">
                  same js functions on all cloned
                </div>
                <div class="col-md-1">
                  <input type="text" name="monto[]" class="form-control" id="montoa1" placeholder="Debe">
                </div>
                <div class="col-md-1">
                  <input type="text" name="monto[]" class="form-control" id="montob1" placeholder="Haber">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

`

Activate JS functionality on clone two inputs fields

1 Answers1