如何在邻近输入文本框中显示计算结果？（多组输入框场景）

嘿，我看你这问题主要出在事件绑定方式过时和DOM元素选择器错误上，还有HTML里的小细节需要调整，咱们一步步来解决：

1. 换掉过时的.live()方法 #

.live()早在jQuery 1.7就被废弃啦，对于PHP循环生成的动态元素，必须用事件委托的方式，通过.on()绑定到页面上固定存在的父元素（比如你可以把所有输入框放在一个带类名的容器里，比如div.input-group-container，如果没有合适的父级，用document也可以）。

2. 修正选择器，精准定位目标输入框 #

你原来的$(this).find('.usr input[type="text"]')完全找错了位置——当前输入框.locur所在的col-sm-3和目标输入框所在的col-sm-3是同级关系，不是父子关系。正确的路径应该是：

• 先找到当前输入框的父级容器.col-sm-3
• 再找到它的下一个同级的.usr容器
• 最后在这个容器里找到目标输入框

3. 修复HTML里的重复ID问题 #

因为是循环生成多组，id="locale"和id="ustate"会重复，这违反HTML规范，要么去掉这些id（反正你用类名选元素），要么改成动态唯一id（比如id="locale-<?php echo $loopIndex; ?>"），这里咱们先直接去掉重复id。

修正后的完整代码 #

HTML部分（修复重复class和id）

<!-- 建议把所有输入框放在一个静态容器里，方便事件委托 -->
<div class="input-group-container">
  <div class="col-sm-3"> 
    <div class="input-group"> 
      <span class="input-group-addon icon_change"><i class="fa"></i></span> 
      <input type="text" class="form-control locur" name="locale[]" placeholder="Enter the value" maxlength="10" value="" /> 
    </div> 
  </div> 
  <div class="col-sm-3 usr"> <!-- 合并了重复的class属性 -->
    <div class="input-group"> 
      <span class="input-group-addon"><i class="fa fa-usr"></i></span> 
      <input type="text" class="form-control usr-input" name="ustate[]" placeholder="Enter the rate" maxlength="10" value="" /> 
    </div> 
  </div>
  <!-- 更多PHP循环生成的组... -->
</div>

jQuery部分（事件委托+正确选择器）

// 用事件委托绑定到静态容器上，确保动态生成的元素也能触发事件
$('.input-group-container').on('change', '.locur', function(){ 
  var local_id = $("#curr_id").val(); // 假设curr_id是页面上唯一的静态元素
  var amt = $(this).val(); 
  var convertedcost = convert_amt(amt, local_id); 
  
  // 精准定位到对应的目标输入框
  $(this).closest('.col-sm-3').next('.usr').find('.usr-input').val(convertedcost); 
});

额外提醒：如果convert_amt是异步函数 #

要是你的convert_amt是调用AJAX这类异步操作，得改成回调方式赋值，不然会拿不到结果：

// 改造convert_amt为带回调的版本
function convert_amt(amt, local_id, callback) {
  // 示例AJAX请求
  $.ajax({
    url: '/your-convert-api',
    data: {amount: amt, curr_id: local_id},
    success: function(result) {
      callback(result); // 拿到结果后调用回调
    }
  });
}

// 调用时
$('.input-group-container').on('change', '.locur', function(){ 
  var self = this; // 保存当前元素的上下文
  var local_id = $("#curr_id").val();
  var amt = $(this).val(); 
  
  convert_amt(amt, local_id, function(convertedcost) {
    $(self).closest('.col-sm-3').next('.usr').find('.usr-input').val(convertedcost); 
  });
});

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