Datatable响应式移动端弹窗输入框值不显示问题求助

问题描述 #

使用Datatable组件时，通过表格内按钮将数据传入jQuery脚本，再赋值给Modal弹窗的输入表单。桌面端浏览器中输入框能正常显示数据，但切换到移动端响应式视图后，输入框为空，数据无法显示。

相关代码 #

jQuery 绑定脚本 #

$('.data_send').on('click',function(){
  var data_1 = $(this).data('data_1');
  var data_2 = $(this).data('data_2');
  var data_3 = $(this).data('data_3');
  $('#input_1').val(data_1);
  $('#input_2').val(data_2);
  $('#input_3').val(data_3);
  $('#form_send_3').attr('action','/pegawai/edit_akun/' + data_1);
});

表格触发按钮 #

<button type="button" 
  class="btn btn-sm btn-link data_send" 
  style="color: red;" 
  data-bs-toggle="modal"
  data-bs-target="#modal_konfirmasi" 
  data-data_1="{{$p->id_peg}}" 
  data-data_2="{{$p->peg_nama}}"
  data-data_3="{{$p->peg_nip}}"
  >
  <i class="fa fa-lg uil uil-trash-alt" ></i>
</button>

Modal弹窗结构 #

<div class="modal fade" id="modal_konfirmasi" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" >
    <div class="modal-dialog" >
      <div class="modal-content" >
        <div class="modal-header bg-red" >
          <div class="modal-title" id="exampleModalLabel" style="margin-top: -0.5vh; margin-bottom: -1vh;">
            <h5>Konfirmasi</h5>
          </div>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>
        </div>
        <div class="modal-body" >
          <h6>Yakin ingin menghapus data pegawai:</h6>
            <input id="input_a1" type="text" class="text-center form-control form-control-sm bg-red" >
            <input id="input_a2" type="text" class="text-center form-control form-control-sm bg-red" >
          <p> Aksi tidak dapat di urungkan, dan data tidak dapat dipulihkan</p>
        </div>
        <div class="modal-footer" >
          <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal" >Batal</button>
          <form id="form_send_1" role="form" method="post">
            @csrf
            <input type="text" hidden name="nama" value="{{$p->peg_nama}}" >
            <button type="submit" class="btn btn-sm btn-danger" >Hapus</button>
          </form>
        </div>
      </div>
    </div>
  </div>

现象 #

• 桌面端：弹窗输入框正常显示对应数据
• 移动端响应式视图：弹窗输入框为空，无数据加载

解决方法 #

1. 修正输入框ID匹配错误 #

观察代码发现，jQuery脚本中赋值的输入框ID是input_1、input_2，但Modal里实际的输入框ID是input_a1、input_a2，两者完全不匹配。这是核心错误，直接导致数据无法正确渲染。

修改方式二选一：

• 调整Modal输入框ID，与jQuery脚本对应：

<input id="input_1" type="text" class="text-center form-control form-control-sm bg-red" >
<input id="input_2" type="text" class="text-center form-control form-control-sm bg-red" >

• 或者调整jQuery脚本中的选择器，匹配Modal实际ID：

// 注意data_2对应姓名，data_3对应NIP，按需调整赋值逻辑
$('#input_a1').val(data_2);
$('#input_a2').val(data_3);

2. 处理Datatable动态渲染导致的事件丢失 #

Datatable在响应式切换时会重新渲染表格行，原来直接绑定在.data_send上的点击事件会失效。改用事件委托绑定，确保动态生成的按钮也能触发事件：

// 委托到document（或表格的父容器，性能更优）
$(document).on('click', '.data_send', function(){
  var data_1 = $(this).data('data_1');
  var data_2 = $(this).data('data_2');
  var data_3 = $(this).data('data_3');
  $('#input_a1').val(data_2);
  $('#input_a2').val(data_3);
  $('#form_send_3').attr('action','/pegawai/edit_akun/' + data_1);
});

3. 改用Bootstrap Modal原生事件（更可靠） #

利用Bootstrap Modal的show.bs.modal事件，在弹窗即将显示时再赋值，避免移动端渲染延迟导致的问题：

$('#modal_konfirmasi').on('show.bs.modal', function (event) {
  // 获取触发弹窗的按钮
  var triggerBtn = $(event.relatedTarget);
  // 读取按钮上的data属性
  var dataId = triggerBtn.data('data_1');
  var dataName = triggerBtn.data('data_2');
  var dataNip = triggerBtn.data('data_3');
  
  // 给弹窗内的输入框赋值
  $(this).find('#input_a1').val(dataName);
  $(this).find('#input_a2').val(dataNip);
  // 更新表单action
  $('#form_send_3').attr('action','/pegawai/edit_akun/' + dataId);
});

使用这种方式时，无需再给.data_send绑定点击事件，直接依赖Bootstrap原生逻辑，兼容性和稳定性更好。

额外排查 #

• 打开浏览器控制台（移动端可通过Chrome DevTools远程调试），查看是否有DOM查找失败、变量未定义等报错
• 确认移动端浏览器未禁用JavaScript，无插件阻止脚本执行

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