使用JQuery获取输入值异常：点击所有按钮仅返回首个输入值

问题出在你的jQuery选择器没有限定查找范围——直接用$('.ord').val()会返回DOM中第一个匹配.ord的元素值，和点击的按钮无关。以下是具体修复方案：

错误代码示例 #

视图代码（foreach循环） #

@foreach(var item in Model)
{
    <div class="row">
        <input type="text" class="ord" value="@item.Order" />
        <button class="btnRtg">提交</button>
    </div>
}

错误的jQuery #

$('.btnRtg').click(function() {
    var order = $('.ord').val(); // 始终取第一个.ord的值
    // 后续逻辑
});

正确修复方案 #

核心思路：通过点击的按钮，定位到它所在的当前行，再在该行范围内查找对应的.ord输入框。

方案1：用closest()+find()（推荐，结构变动时更稳定） #

$('.btnRtg').click(function() {
    // 找到当前按钮的父级.row容器，再在容器内查找.ord输入框
    var order = $(this).closest('.row').find('.ord').val();
    console.log(order); // 现在会取当前行的输入框值
});

方案2：用siblings()（适用于按钮和输入框是同级元素的情况） #

如果输入框和按钮在同一层级，可以直接找同级元素：

$('.btnRtg').click(function() {
    var order = $(this).siblings('.ord').val();
    console.log(order);
});

方案3：动态生成元素的事件委托 #

如果行是通过AJAX动态添加的，需要用事件委托绑定点击事件：

$(document).on('click', '.btnRtg', function() {
    var order = $(this).closest('.row').find('.ord').val();
    console.log(order);
});

关键说明 #

• 永远不要全局查找类名来获取当前操作行的元素，必须通过触发事件的元素（this）来限定查找范围。
• 选择器的层级可以根据你的实际HTML结构调整，比如如果父容器不是.row，换成对应的类名或标签即可。

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