javascript - 如何同步每对动态创建的输入？

Question

我正在动态创建多个元素，并且我想同步特定的元素。我编写这段代码是为了尽可能简单地了解我的问题。

创建输入并附加他的值后，我希望每次都可以编辑它。因此，如果我创建多个 id input0,1,2 等 的输入并更改特定输入的值，我想在合适的输入中获取该值。我为 1 对编写函数，如何为每对动态创建的输入实现该功能？

$(document).ready(function() {
  var a = 0;
  $('#add').hide();
  
  $('#generateInput').click(function() {
    $('#divArea').append('<input name="input' + a + '">');
    $('#generateInput').toggle();
    $('#add').toggle();
  })
  
  $('#add').click(function() {
    $('#divArea').append('<input name="copyInput' + a + '" value="' + $('input[name="input' + a + '"]').val() + '"readonly="readonly"><br />');
    $('#add,#generateInput').toggle();
    a++;
  })
});

//how to make this for all created inputs?
$(document).on('keyup', '[name="input0"]', function() {
  $('[name="copyInput0"]').val(this.value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divArea"></div>

<button id="generateInput">Generate</button>
<button id="add">Add</button>

Answer 1

您可以简单地对您创建的每个输入使用 onkeyup() 并获取该函数内的值。

var a = 0;

$(document).ready(function() {

  $('#add').hide();
  $('#generateInput').click(function() {
    $('#divArea').append('<input onkeyup="onKeyUp(this)" name="input' + a + '" index="' + a + '">');
    $('#generateInput').toggle();
    $('#add').toggle();
  })
  $('#add').click(function() {
    $('#divArea').append('<input name="copyInput' + a + '" value="' + $('input[name="input' + a + '"]').val() + '"readonly="readonly"><br />');
    $('#add,#generateInput').toggle();
    a++;
  })
});
//how to make this for all created inputs?
function onKeyUp(input) {
  $('input[name="copyInput' + $(input).attr('index') + '"]').val(input.value)
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div id="divArea">
</div>

<button id="generateInput">
    Generate
    </button>
<button id="add">
    Add
    </button>