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
}

上面的代码显示

文本来自

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

Answer 1

除了为所有tds和button编写多个事件处理程序之外，您可以只为 button 和 td 使用一个事件处理程序。 因此，当单击 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>