如何让动态生成的number输入框自动将值限制在设定max值？

你可以通过事件委托绑定input事件，实现输入框值超过max时自动修正的效果，具体修改如下：

修改后的完整代码 #

// console.log(missedProductSlip[0].productList)
$(missedProductSlip[0].productList).each(function(i, e) {
    $("#card-deck").append(
        '<div id="card' + i + '" class="card" style="width:200px; float:left; margin:10px" ><div id="productID' + i + '" hidden>' + missedProductSlip[0].productList[i].productID + '</div><img style="width:200px;height:200px; object-fit: contain;" class="card-img-top" src="' + missedProductSlip[0].productList[i].image + '" alt="Card image cap"><div class="card-body"><h5 class="card-title text-center" >' + missedProductSlip[0].productList[i].product + '</h5><p class="card-text text-center">' + missedProductSlip[0].productList[i].eanCode + '</p><div class="input-group mb-2"><div class="input-group-prepend"><div class="input-group-text">' + missedProductSlip[0].productList[i].number + '</div></div><input type="number" class="form-control" id="amountInput' + i + '" min="0" max="' + missedProductSlip[0].productList[i].number + '" step="1"></div><button id="' + i + '" class="btn btn-primary">Product gevonden</button></div></div>'
    )
})

// 新增：实时限制输入框值不超过max
$(document).on('input', 'input[type="number"].form-control', function() {
    const maxVal = parseFloat($(this).attr('max'));
    const minVal = parseFloat($(this).attr('min'));
    let inputVal = parseFloat($(this).val());

    // 处理非数字或空输入
    if (isNaN(inputVal)) {
        $(this).val(minVal);
        return;
    }

    // 超过最大值自动修正为max
    if (inputVal > maxVal) {
        $(this).val(maxVal);
    }
    // 小于最小值自动修正为min（可选，按需保留）
    else if (inputVal < minVal) {
        $(this).val(minVal);
    }
});

$("button").click(function() {
    var input = $("#amountInput" + this.id).val()
    var productID = $("#productID" + this.id).text()

    // console.log("card" + this.id); // or alert($(this).attr('id'));
});

关键说明 #

• 用$(document).on('input', 选择器, 函数)实现事件委托：因为输入框是动态生成的，页面初始加载时不存在，直接绑定事件无效，必须委托给已存在的父元素（这里用document，也可以用#card-deck更精准）。
• input事件会在用户输入（包括键盘输入、粘贴、微调按钮）时实时触发，无需等待按钮点击。
• 代码中同时处理了空值/非数字输入，以及最小值限制（可选，若不需要可删除对应的判断逻辑）。

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