php - 在克隆两个输入字段上激活 JS 功能

Question

我有一个包含各种字段的表单，以及一对克隆按钮和删除表单的克隆部分。

此外，我在这些字段中有一对整数输入，当我点击其中一个时单击时值“跳转”到另一个字段。

问题是当我克隆表单时，“跳转”功能不会附加到其他克隆输入。

这是克隆函数:

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

通过使用 php 的 dinamicaly 代码实现了这一点

$("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 = '';  


});

输入是这样的:

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

并且所有的n-cloned字段都通过自动增加id来编号，如id="montoa2"和id="montob3"等等。

非常感谢所有评论。

编辑:创建一个 jsfiddle https://jsfiddle.net/o63c61sj/

Answer 1

今天解决了!

这次是向 .clone() 函数添加一个参数

这是因为这是 jquery 所说的 deepWithDataAndEvent 克隆事件。

.clone( [withDataAndEvents ] [, deepWithDataAndEvents ] )

这次我的解决方案是clone(true)。

希望其他人可能有用。 `

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

`