使用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
}

上面的代码显示

文本来自

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

- Truong Nguyen

---

嗨，clickAButton()是如何被调用的？ - Swati

@Swati，我已经添加了代码。它在同一个原始的for循环中。 - Truong Nguyen

你能在 clickButton 函数内访问 jsonObject 和 index 变量吗？ - Kiran Mahale

@KiranMahale 是的，我能够访问jsonObject和index。我担心它不再是那个id了，因为已经解除绑定了？ - Truong Nguyen

据我理解，您想获取td标签之间的文本，以便可以通过textContent访问它。例如： var text = $(#fName-${jsonObject.results[index].id}).textContent; - Kiran Mahale

Answer 1

不要为所有的 tds 和 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>

- Swati

---

如果我有另一个字段，比如姓氏，我该怎么做才能获取该行中的所有内容？ - Truong Nguyen

你能否编辑你的问题并附上完整的代码？ - Swati