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_konfirmasivs#modal_edit—— 原问题中按钮data-bs-target和模态框id不一致是主因； -
避免在 DataTables 动态渲染行中重复绑定事件：应使用事件委托（如
$(document).on('click', '.data_send', ...)），否则新增行按钮无效； -
移动端调试技巧：用 Chrome DevTools 切换设备模拟器 → 刷新 → 在 Console 执行
$('#input_1').length确认元素是否存在，再查$('#input_1').val()是否被覆盖。
遵循以上方案，即可彻底解决「桌面端正常、移动端空白」问题，确保数据在所有设备上稳定回填。
