在克隆两个输入字段时激活 JS 功能答案

【问题标题】：Activate JS functionality on clone two inputs fields在克隆两个输入字段时激活 JS 功能
【发布时间】：2018-05-26 04:26:46
【问题描述】：

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

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

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

这是克隆功能：

  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 克隆字段都通过自动增加 id 进行编号，例如 id="montoa2" 和 id="montob3" 等等。

所有 cmets 将不胜感激。

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

【问题讨论】：

$(this).closest(".clonedInput").remove();。试试这个
您好，删除功能现在正在工作。所以我不能将$("input[id^='montoa']").on("click", function(e){ ... }); 应用于克隆添加的字段...
与其问，不如试试看它是否有效。
我对所有工作代码进行了完整的测试，结果相同。
我无法理解你想说什么

标签： php jquery

【解决方案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>

【讨论】：