如何从<tr>内动态生成的输入框取值？返回undefined问题排查

嘿，作为jQuery新手遇到动态元素取值的问题太正常啦！我帮你捋捋可能的问题点和解决办法～

1. 先修正代码里的低级错误 #

你代码里这一行明显写错了：

$('#id_children-TOTAL_FORMS').val = no

jQuery里设置元素值要用方法调用，不是直接给属性赋值！正确写法应该是：

$('#id_children-TOTAL_FORMS').val(no);

这一步错了的话，表单总数量没被正确设置，后续动态生成的<tr>和输入框可能根本没被初始化，直接导致你后续取值时找不到元素，返回undefined。

2. 动态生成元素的取值注意事项 #

动态生成的元素（比如你通过函数添加的<tr>和输入框）在页面初始加载时是不存在的。如果直接用普通选择器取值，很可能因为元素还没被添加到DOM而找不到，返回undefined。

正确的遍历取值方式 #

如果你要获取所有<tr>里输入框的值，可以遍历表格的每一行，再定位到行内的输入框：

// 遍历表格里的每一行<tr>
$('#children_td_table tr').each(function() {
    // 找到当前行内的输入框并取值
    var inputValue = $(this).find('input').val();
    // 这里可以处理值，比如打印或存储
    console.log(inputValue);
});

这种方式不管是静态还是动态生成的<tr>，都能被正确匹配到。

绑定事件后取值（比如输入框变化时） #

如果是想在输入框内容变化时取值，要用到事件委托——把事件绑定到已经存在的父元素上，让它代理动态元素的事件：

// 给表格绑定事件，委托给动态生成的输入框
$('#children_td_table').on('change', 'input', function() {
    var currentVal = $(this).val();
    console.log('当前输入框的值：', currentVal);
});

这样就算后续新增输入框，也能正常触发事件并拿到值。

3. 检查选择器是否正确 #

返回undefined还有可能是选择器写错了：

• 确认#children_td_table这个表格ID有没有拼写错误
• 确认动态生成的输入框有没有正确的类名/ID，如果你用了特定选择器（比如.child-input），要确保生成元素时加上了对应的标识

修正后的示例代码片段 #

function dynamic_children() {
    $(function () {
        var no = $('#number_children').val();
        // 修正val()调用方式
        $('#id_children-TOTAL_FORMS').val(no);
        var children_added = $('#children_td_table tr').length;
        var remaining = 4 - children_added;
        
        // 假设这里是你动态添加<tr>和输入框的逻辑
        for(var i=0; i<remaining; i++){
            var newRow = '<tr><td><input type="text" name="child_' + (children_added+i) + '"></td></tr>';
            $('#children_td_table').append(newRow);
        }

        // 遍历取值示例
        $('#children_td_table tr').each(function(index) {
            var inputVal = $(this).find('input').val();
            console.log('第' + (index+1) + '个输入框的值：', inputVal);
        });
    });
}

内容的提问来源于stack exchange，提问作者jassy