AJAX循环渲染表格时首个input输入框取值为undefined问题求助

问题根因 #

• 1. 取值时机错误：你在创建input元素后，还没有将其插入到页面DOM树中时，就使用$("#inpqty")从全局DOM查询元素，第一次循环时页面中不存在对应ID的元素，自然返回undefined。第二次及之后的循环能拿到值，是因为前一次循环已经把上一行的input插入到DOM里了，但你拿到的其实是上一行的input值，不是当前行的，本身也是错误结果。
• 2. 重复ID违规：DOM规范要求ID全局唯一，你在循环中给每一行的input、按钮都设置了相同的ID，会导致选择器行为完全不符合预期，后续做任何元素查询都会出现匹配错误。
• 3. PHP代码无效：你在动态生成的HTML字符串里写的<?php echo 2 ?>不会被PHP解析执行，PHP只会在服务端渲染文件时处理一次代码，客户端JS拼接的字符串里的PHP标签会被浏览器当成普通文本，input的默认值设置是无效的。

修复方案 #

直接操作你刚创建的jQuery元素对象，不要用全局ID选择器查询，同时把重复ID替换为class，修正默认值设置：

function getProduct(){
    $.ajax({
        url:"./services/getproductlist.php",
        method: "GET",
        success: function(res){
            $("#product-list").html('');
            var count = 1;
            console.log(res);
            res.forEach(function(item){
                var row = $("<tr></tr>");
                var col1 = $("<td>" + count + "</td>");
                var col2 = $("<td>" + item['nama_produk'] + "</td>");
                var col3 = $("<td>" + item['harga_produk'] + "</td>");
                // 单独创建input元素，用class代替ID，直接设置默认值2
                var $qtyInput = $("<input type='number' name='inp' class='inpqty' required value='2'>");
                var col4 = $("<td></td>").append($qtyInput);
                
                var btn = $('<td scope="col"></td>');
                // 按钮也用class代替重复ID
                var add = $('<a href="#" class="add-btn"><svg class="bi me-2" width="16" height="16" style="color: black; margin-left: 10px;"><use xlink:href="#basket"/></svg></a>');
                var add2 = $('<a href="#" class="inp-btn"><svg class="bi me-2" width="16" height="16" style="color: black; margin-left: 10px;"><use xlink:href="#basket"/></svg></a>');

                add.data('id_produk', item['id_produk']);
                // 直接从刚创建的input对象取值，不需要查询DOM
                add2.data('qty', $qtyInput.val());
                console.log(item['id_produk']);
                console.log(item['harga_produk'] * $qtyInput.val());
                

                col1.appendTo(row);
                col2.appendTo(row);
                col3.appendTo(row);
                col4.appendTo(row);
                add.appendTo(btn);
                add2.appendTo(btn);
                btn.appendTo(row);
                count++;
                $("#product-list").append(row);
            });
            $("#tableImage").DataTable();
        },
        error: function(){
            alert('fail');
        }
    });
}

如果后续需要给按钮绑定点击事件，获取当前行的输入框值，可以用父子关系查找，避免匹配错误：

// 用事件委托绑定点击事件
$(document).on('click', '.inp-btn', function(){
    // 先找当前按钮所在的行，再查找该行内的输入框
    var currentQty = $(this).closest('tr').find('.inpqty').val();
    // 后续业务逻辑
})

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