如何为HTML数组形式的input元素绑定focusout失焦事件

• 选择器使用错误：你的input元素id是codemf+数字的格式，不存在id为codemf[]的元素，且jQuery选择器中[]是特殊字符，直接写会被识别为属性选择器语法，无法匹配目标元素
• 触发事件后未指向当前元素：回调函数中直接使用$('#codemf[]')取值/操作样式，无法对应到当前触发focusout的输入框，只会匹配第一个符合选择器规则的元素
• 如果输入框是动态渲染的，直接绑定focusout事件不会作用到后续新增的元素上
• 原请求逻辑缺失参数：req.php?mf=后没有拼接当前输入框的内容，后端无法获取待校验的值，返回结果自然不符合预期

静态输入框场景（页面加载时所有输入框已经渲染完成） #

$('input[name="codemf[]"]').focusout(function () {
    // 用$(this)指向当前触发事件的输入框
    const $currentInput = $(this);
    const inputVal = $currentInput.val().trim();

    if (inputVal !== '') {
        // 补全请求参数，把输入值传给后端
        $.get("req.php?mf=" + inputVal, function (data) {
            let isExist = 0;
            const info = data.split('|');
            for(let i=0;i<info.length;++i) {
                if(inputVal == info[i]) {
                    isExist = 1;
                    break; // 匹配到就跳出循环，减少不必要遍历
                }
            }
            if(isExist === 0) {
                $currentInput.addClass("is-invalid");
                $('#command').attr('disabled', true);
            } else {
                $currentInput.removeClass("is-invalid");
                $('#command').attr('disabled', false);
            }
        });
    } else {
        $currentInput.removeClass("is-invalid");
        $('#command').attr('disabled', false);
    }
});

动态输入框场景（输入框是后续异步/交互生成的） #

使用事件委托绑定到页面已存在的父元素上即可，示例选择document作为父元素，你可以替换为包裹这些输入框的最近的静态元素（比如表格、div容器），性能更好：

$(document).on('focusout', 'input[name="codemf[]"]', function () {
    // 后续逻辑和静态场景完全一致
    const $currentInput = $(this);
    const inputVal = $currentInput.val().trim();

    if (inputVal !== '') {
        $.get("req.php?mf=" + inputVal, function (data) {
            let isExist = 0;
            const info = data.split('|');
            for(let i=0;i<info.length;++i) {
                if(inputVal == info[i]) {
                    isExist = 1;
                    break;
                }
            }
            if(isExist === 0) {
                $currentInput.addClass("is-invalid");
                $('#command').attr('disabled', true);
            } else {
                $currentInput.removeClass("is-invalid");
                $('#command').attr('disabled', false);
            }
        });
    } else {
        $currentInput.removeClass("is-invalid");
        $('#command').attr('disabled', false);
    }
});

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