如何修复模态框在移动端无法显示 jQuery 传入值的问题-php教程-PHP中文网

如何修复模态框在移动端无法显示 jQuery 传入值的问题

Bootstrap 5 模态框在移动端数据不显示，通常因事件绑定过早或 data-bs-target 与模态框 ID 不匹配导致；需确保 DOM 加载完成后再绑定点击事件，并严格校验目标 ID 一致性。

bootstrap 5 模态框在移动端数据不显示，通常因事件绑定过早或 `data-bs-target` 与模态框 id 不匹配导致；需确保 dom 加载完成后再绑定点击事件，并严格校验目标 id 一致性。

在使用 DataTables 配合 Bootstrap 5 模态框（Modal）进行数据回填的场景中，常见一种「桌面端正常、移动端空白」的问题：点击按钮后，data-* 属性值能正确提取并赋给表单输入框（如 $('#input_1').val(data_1)），但在手机浏览器或响应式视图下，模态框弹出时输入框却为空。根本原因并非 jQuery 或 DataTables 兼容性缺陷，而是 事件执行时机与模态框渲染机制的冲突。

✅ 正确做法：延迟赋值 + ID 严格匹配

Bootstrap 5 的 data-bs-toggle="modal" 会异步触发模态框初始化（包括 DOM 插入、动画准备等）。若你在 .data_send 点击事件中立即操作 #input_1 等元素，而此时模态框尚未完全渲染（尤其在移动端因性能限制更明显），则 $('#input_1') 可能返回空集合，赋值失败。

因此，必须：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

将事件监听包裹在 $(document).ready() 中，确保 DOM 就绪；
确认 data-bs-target 的 ID 与模态框 id 完全一致（注意大小写、下划线、拼写）；
推荐使用 Bootstrap 的 shown.bs.modal 事件，在模态框完全显示后再填充数据（更健壮）。

以下是优化后的标准写法：

<!-- 按钮：data-bs-target 必须与下方 modal id 完全一致 -->
<button type="button" class="btn btn-sm btn-link data_send" data-bs-toggle="modal" data-bs-target="#modal_edit" id="modal_edit">
  data-data_1="101"
  data-data_2="张三"
  data-data_3="P123456">
  编辑
</button>

<!-- 模态框：id 必须与 data-bs-target 值严格一致 -->
<div class="modal fade" id="modal_edit" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">编辑员工</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form id="form_send_3" method="post">
          @csrf
          <input id="input_1" type="text" class="form-control mb-2" placeholder="ID" name="id"><input id="input_2" type="text" class="form-control mb-2" placeholder="姓名" name="nama_old"><input id="input_3" type="email" class="form-control mb-2" placeholder="邮箱" name="email">
</form>
      </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function() {
  // ✅ 方案一：点击时暂存数据，待模态框显示后再填充（推荐）
  let pendingData = null;

  $('.data_send').on('click', function() {
    pendingData = {
      data_1: $(this).data('data_1'),
      data_2: $(this).data('data_2'),
      data_3: $(this).data('data_3'),
      actionUrl: '/pegawai/edit_akun/' + $(this).data('data_1')
    };
  });

  // ✅ 在模态框完全显示后填充（兼容所有设备）
  $('#modal_edit').on('shown.bs.modal', function () {
    if (pendingData) {
      $('#input_1').val(pendingData.data_1);
      $('#input_2').val(pendingData.data_2);
      $('#input_3').val(pendingData.data_3);
      $('#form_send_3').attr('action', pendingData.actionUrl);
      pendingData = null; // 清空缓存
    }
  });

  // ✅ 方案二（备选）：若坚持点击即填，需确保模态框已存在（非动态生成）
  // 注意：仅适用于模态框静态存在于 HTML 中的场景
  // $('.data_send').on('click', function() {
  //   const $modal = $('#modal_edit');
  //   if ($modal.length && $modal.hasClass('show')) {
  //     // 已显示，直接赋值
  //   } else {
  //     // 等待模态框渲染完成（不推荐，兼容性差）
  //     setTimeout(() => {
  //       $('#input_1').val($(this).data('data_1'));
  //     }, 100);
  //   }
  // });
});
</script>

⚠️ 关键注意事项

不要遗漏 $(document).ready()：未包裹会导致移动端 DOM 未就绪即执行，$('.data_send') 绑定失败；
检查 ID 大小写与符号：#modal_konfirmasi vs #modal_edit —— 原问题中按钮 data-bs-target 和模态框 id 不一致是主因；
避免在 DataTables 动态渲染行中重复绑定事件：应使用事件委托（如 $(document).on('click', '.data_send', ...)），否则新增行按钮无效；
移动端调试技巧：用 Chrome DevTools 切换设备模拟器 → 刷新 → 在 Console 执行 $('#input_1').length 确认元素是否存在，再查 $('#input_1').val() 是否被覆盖。