javascript - 如何引用动态创建的元素？

Question

我正在动态创建一些元素，并且我想对它们进行操作，所以我的代码位于以下位置:

$(document).ready(function() {
  var a = 0;
  $('#generateInput').click(function() {
    $('#divArea').append('<div id="div' + (a) + '"><input name="Name' + (a) + '"></div>')
    $('#generateInput').hide()
  })

  $("#add").click(function addValue() {
    $('#inputValuesArea').append('<tr><td>' + '<input val="' + $('input[name="Name' + (a) + '"]').val() + '" readonly="readonly">' +
      '</td><td>' + '<button id="button' + (a) + '"type="button">Edit</button>' + '</td></tr>');
    $('#divArea').hide();
    $('#add').hide();
    $('#generateInput').show();
    a++;
  });
});

<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>
<table id="inputValuesArea">
</table>

我正在做的是:创建输入->隐藏它并使用按钮将值附加到另一个输入。我想要的是:如果我创建多个输入，我想要 .show() 特定一个来编辑其值。我不知道如何引用这个隐藏的输入，因为我无法获取他的 ID

Answer 1

如果您要附加多个输入并尝试在单击编辑按钮时允许对每个输入进行编辑，那么您可以使用 eq 而不是它的 id 根据其位置来识别所选输入 属性。

以下内容允许添加多个输入并编辑 readonly 属性进行演示，但您可以使用 currentInput 对象来执行您需要的任何操作。

$(document).ready(function() {
  var a = 0;
  var b = 0;
  $('#generateInput').click(function() {
    $('#divArea').append('<div id="div' + a + '"><input name="Name' + a + '"></div>')

    a++;
  });

  $("#add").click(function() {
    var nextInputVal = $('input[name="Name' + b + '"]').val();
    $('#inputValuesArea').append('<tr><td>' + '<input value="' + nextInputVal + '" readonly="readonly">' +
      '</td><td>' + '<button class="edit-button" id="button' + b + '"type="button">Edit</button>' + '</td></tr>');
    $('#divArea').hide();
    $('#generateInput').show();
    b++;
  });

  $('body').on('click', '.edit-button', function()
  {
    var pos = $('.edit-button').index($(this));
    var currentInput =  $('#inputValuesArea input').eq(pos);
    currentInput.removeAttr('readonly');
  });
});

https://jsfiddle.net/xqcfsojv/2/