stevenjin 2025-01-11 17:16 采纳率: 96.8%
浏览 13
已结题

用jquery动态给table增加一行，其td中有一个input，但有时输入的值并不能生效

用jquery动态给table增加一行，其td中有一个input，但有时输入的值并不能生效(获取不到值，通过审查查看到值还是0，而不是输入的值)。

  • 写回答

2条回答 默认 最新

  • 道友老李 JWE233286一种基于机器视觉的水表指针读数识别及修正的方法 专利发明者 2025-01-11 17:17
    关注
    让【道友老李】来帮你解答，本回答参考gpt编写，并整理提供，如果还有疑问可以点击头像关注私信或评论。
    如果答案让您满意，请采纳、关注，非常感谢！
    问题分析：
    1. 可能是因为动态增加的行没有正确绑定事件处理程序，导致输入的值不能生效。
    2. 可能是因为增加的行尚未在DOM中渲染完成，无法被正确获取。 解决方法：
    3. 在动态增加行的同时，为每个input绑定change事件，确保输入的值能够被正确处理。
    4. 使用事件代理，通过父元素来监听子元素的事件，确保新添加的行的input也能被正确处理。 示例代码：
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Table Row</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>
<td><input type="text" class="input-field"></td>
</tr>
</table>
<button id="addRow">Add Row</button>
<script>
$(document).ready(function() {
    // Add row to table
    $('#addRow').click(function() {
        $('#myTable').append('<tr><td><input type="text" class="input-field"></td></tr>');
    });
    // Event delegation to handle input changes in dynamically added rows
    $('#myTable').on('change', '.input-field', function() {
        var value = $(this).val();
        console.log(value);
    });
});
</script>
</body>
</html>

    以上是一个简单的示例代码，点击Add Row按钮可以动态增加一行带有一个input输入框的表格行，同时通过事件委托的方式为每个输入框绑定change事件，确保输入的值能够被正确处理。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 5月17日
  • 已采纳回答 5月9日
  • 创建了问题 1月11日