javascript - jquery 从动态创建的输入中获取文本

Question

我有一些代码可以显示 JSON 并允许用户编辑文本。编辑后，我想让用户点击一个按钮来保存新的输入值。除了获取新的输入值外，一切都按预期工作。

for (let i = 0; i < jsonObject.results.length; i++) {
    var row = `<tr scope="row" class="test-row-${jsonObject.results[i].id}">
    <td id="fName-${jsonObject.results[i].id}" data-testid="${jsonObject.results[i].id}">${jsonObject.results[i].firstName}</td>
    // some code

    $(`#save-${jsonObject.results[i].id}`).click(function(){
      clickAButton(jsonObject.results[i].id, jsonObject, i);
    });

    $(`#fName-${jsonObject.results[i].id}`).on('click', editResult)
    
}

function editResult(){
  var testid = $(this).data('testid')
  var value = $(this).html()

  $(this).unbind()
  $(this).html(`<input class="result form-control" data-testid="${testid}" type="text" value="${value}">`)
}

function clickAButton() {
  var text = $(`#fName-${jsonObject.results[index].id}`).val();
  console.log("text from " + text);
  // code
}

上面的代码显示

text from

如何让它显示新的用户输入？

Answer 1

您可以只为按钮和 td 使用一个事件处理程序，而不是为所有 tds 和 button 编写多个事件处理程序。因此，当单击 td 时，只需从 td 中删除 data-testid 属性，这样就不会再次调用该事件并使用 $(this).closest('tr') 获取输入值.find('.result').val() 这将为您提供点击 save 按钮的输入值。

演示代码:

var jsonObject = {
  "results": [{
    "id": 1,
    "firstName": "sas"
  }, {
    "id": 2,
    "firstName": "cd"
  }]
}

for (let i = 0; i < jsonObject.results.length; i++) {
  var row = `<tr scope="row" class="test-row-${jsonObject.results[i].id}">
    <td id="fName-${jsonObject.results[i].id}" data-testid="${jsonObject.results[i].id}">${jsonObject.results[i].firstName}</td><td><input type='button' id='save-${jsonObject.results[i].id}' value ='save'></td></tr>`

  $("table").append(row)
}

$(document).on('click', 'td[data-testid]', function() {
  var testid = $(this).data('testid')
  var value = $(this).html()
  $(this).html(`<input class="result form-control" data-testid = "${testid}" type = "text"
  value = "${value}" >`)
  //removed data-testid
  $(this).removeAttr("data-testid");
})

$(document).on('click', '[id*=save-]', function() {
  //use class to find input
  var text = $(this).closest('tr').find('.result').val();
  console.log("text from " + text);

})

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