[英]jquery get text from dynamically created input
我有一些代碼顯示 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
}
上面的代碼顯示
文本來自
如何讓它顯示新的用戶輸入?
除了為所有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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.