如何在Razor循环生成的输入框中运行jQuery函数？

嘿，我看你遇到了循环生成表单输入框后，jQuery函数没法正确触发的问题，这其实是因为原代码里有两个常见的坑：重复的ID和错误的HTML结构，还有内联事件没法适配动态元素的问题。下面一步步帮你搞定：

第一步：修复HTML结构和重复ID的问题 #

原代码里把<tbody>放在@for循环里了，这会导致每一行都生成一个tbody，不符合HTML规范；而且所有输入框用了相同的ID（tm、ob、percentage），ID在DOM里必须唯一，这会让jQuery无法精准定位到当前行的元素。

修改后的Razor代码如下：

<table>
    <tbody>
        @for (int i = 0; i < ViewBag.Count; i++)
        {
            <tr>
                <td>
                    <input type="text" required readonly 
                           name="emp[@i].Total_Marks" 
                           value="@ViewBag.Total" 
                           class="form-control total-marks" />
                </td>
                <td>
                    <input type="number" required 
                           name="emp[@i].Obtained_Marks" 
                           class="form-control obtained-marks" />
                </td>
                <td>
                    <input type="number" required 
                           name="emp[@i].Percentage" 
                           class="form-control percentage" />
                </td>
                <!-- 其他列继续编写 -->
            </tr>
        }
    </tbody>
</table>

这里做了几个关键修改：

• 把<tbody>移到循环外面，整个表格只保留一个tbody，符合HTML结构规范
• 去掉了重复的ID，改用类名来标识不同功能的输入框（total-marks、obtained-marks、percentage），避免DOM ID冲突

第二步：用jQuery事件委托绑定函数，替换内联事件 #

原代码里的onfocus="calcper()"是内联事件，对于循环生成的动态元素，用事件委托更可靠，而且能轻松获取当前行的上下文。

下面是修改后的jQuery代码：

$(document).ready(function() {
    // 给所有percentage输入框绑定focus事件，用事件委托适配动态生成的元素
    $(document).on('focus', '.percentage', function() {
        calcPercentage($(this));
    });

    // 额外加分：监听得分输入框的输入事件，实时计算百分比
    $(document).on('input', '.obtained-marks', function() {
        var $percentageInput = $(this).closest('tr').find('.percentage');
        calcPercentage($percentageInput);
    });
});

// 封装计算百分比的函数，接收当前的percentage输入框元素
function calcPercentage($percentageInput) {
    // 找到当前输入框所在的行
    var $row = $percentageInput.closest('tr');
    // 获取当前行的总分和得分
    var totalMarks = parseFloat($row.find('.total-marks').val());
    var obtainedMarks = parseFloat($row.find('.obtained-marks').val());

    // 做非空和除零判断，避免计算错误
    if (!isNaN(totalMarks) && totalMarks > 0 && !isNaN(obtainedMarks)) {
        var percentage = (obtainedMarks / totalMarks) * 100;
        // 保留两位小数后赋值给百分比输入框
        $percentageInput.val(percentage.toFixed(2));
    } else {
        $percentageInput.val('');
    }
}

为什么这么改？ #

• 事件委托：$(document).on('focus', '.percentage', ...) 能监听页面上所有（包括后来动态生成的）.percentage元素的focus事件，比内联事件更灵活且易维护。
• 基于行的上下文：通过closest('tr')找到当前输入框所在的行，再用find()获取该行内的其他输入框，确保每次计算都是针对当前行的数值，不会和其他行混淆。
• 封装函数：把计算逻辑封装成独立函数，既方便复用（比如监听得分输入时自动计算），也更容易后续调整计算规则。

这样修改后，每一行的输入框都能正确触发计算逻辑，不会互相干扰啦！

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