Question

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

此外，我在那些字段中有一对整数输入，当我点击其中一个时价值＆＃34;跳跃＆＃34;点击时到另一个字段。

问题在于，当我克隆表单时，＆＃34; jump＆＃34;不要附加到其他克隆的输入。

这是克隆功能：

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

这个方法是用这个代码使用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 = '';  


});

输入是这样的：

 <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克隆字段都会通过自动增加id="montoa2"和id="montob3"等ID来编号。

所有评论都将非常感激。

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

Answer 1

今天解决了！

这次是为.clone（）函数添加一个参数

这是因为这是一个deepWithDataAndEvent克隆事件，如jquery所说。

.clone（[withDataAndEvents] [，deepWithDataAndEvents]）

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

希望别人有用。 `

＆＃13;

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

＆＃13;

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

＆＃13;

`

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

1 个答案: