jQuery事件驱动变量跨函数调用：Modal值无法赋值到输入框

看起来你遇到的问题主要是事件绑定逻辑错误加上缺少目标元素的跟踪，导致点击保存按钮时没有任何反应。让我帮你拆解问题并给出修复代码：

核心问题点 #

• 事件绑定位置不对：你把保存按钮的点击事件绑定在了.shelve_number的change回调里，但用户是通过onfocus触发模态框，change事件根本不会触发，所以保存按钮的点击逻辑根本没被注册上。
• 没有跟踪目标输入框：模态框是全局的，你需要知道当前要把货架号赋值给哪一个动态生成的输入框，之前的代码没做这个记录。

修复后的完整代码实现 #

1. 改造模态框弹出函数，跟踪目标输入框 #

首先修改popModal函数，在弹出模态框时记录当前点击的输入框，同时动态获取当前行的wh_id和light_id（之前你写死了这两个值，现在改成从当前行的隐藏输入框取，符合动态表格的需求）：

// 全局变量存储当前需要赋值的输入框
let targetShelveInput = null;

function popModal(inputElement){
  // 记录当前点击的输入框
  targetShelveInput = inputElement;
  const $currentRow = $(inputElement).closest('tr');
  
  // 从当前行获取仓库ID和灯具ID
  const wh_id = $currentRow.find('input[name="wh_id"]').val();
  const light_id = $currentRow.find('input[name="light_id"]').val();

  // 清空货架下拉框，显示加载提示
  $('#shelve_no').html("<option value='0' disabled selected>Loading shelves...</option>");

  // 请求对应灯具的货架列表
  $.ajax({
    type: "GET",
    url: '{!! url('warehouse/getshelveByluminaire') !!}/'+wh_id+"/"+light_id,
  }).done(function(res) {
    console.log(res);
    let optionHtml = "<option value='0' disabled selected>Choose Shelve</option>";
    res.forEach(shelve => {
      optionHtml += `<option value='${JSON.stringify(shelve)}'>${shelve.shelve_no}</option>`;
    });
    $('#shelve_no').html(optionHtml);
  }).fail(function() {
    $('#shelve_no').html("<option value='0' disabled selected>Failed to load shelves</option>");
  });

  // 弹出模态框
  $('#myModal').modal('show');
}

2. 正确绑定保存按钮的点击事件 #

把保存按钮的点击事件移到document.ready里，只绑定一次，这样不管模态框弹出多少次，点击事件都有效：

$(document).ready(function() {
  // 模态框保存按钮点击逻辑
  $('#save_modal').on('click', function() {
    // 没有目标输入框直接返回
    if (!targetShelveInput) return;

    const $selectedOption = $('#shelve_no option:selected');
    // 校验是否选择了货架
    if ($selectedOption.val() === '0') {
      alert('Please select a valid shelve number!');
      return;
    }

    // 解析选中的货架数据，赋值给目标输入框
    const selectedShelve = JSON.parse($selectedOption.val());
    $(targetShelveInput).val(selectedShelve.shelve_no);

    // 关闭模态框并重置目标输入框
    $('#myModal').modal('hide');
    targetShelveInput = null;
  });
});

3. 移除冗余代码 #

删掉原来这段完全没用的代码：

// 这段代码可以删掉！
$('.shelve_number').on('change',function() {
 let parent = $(this).parents('tr');
 let shelve = parent.find('.shelve_number');
 var selected_shelve = jQuery("#shelve_no option:selected").val();
 var shelve_selected =JSON.parse(selected_shelve).shelve_no;
 //Save Modal function
 $('#save_modal').on('click',function(x){
 shelve.val(shelve_selected);
 $('#myModal').modal('hide');
 });
 });

为什么这样改能解决问题？ #

1. 跟踪目标输入框：弹出模态框时就记录要赋值的输入框，保存时直接找到它，不会搞混动态生成的多个输入框。
2. 事件绑定时机正确：保存按钮的点击事件在页面加载完成后就注册，不会因为change事件没触发而失效。
3. 动态获取行数据：从当前行的隐藏输入框取wh_id和light_id，适配动态渲染的表格，而不是写死固定值。

现在测试一下，点击任意一个shelve_number输入框，弹出模态框加载对应货架，选择后点击保存，货架号应该就能正确填充到对应的输入框里了。

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