如何通过JavaScript修改Bootstrap模态框内的元素？

基础原理 #

Bootstrap模态框无论显示/隐藏状态，始终存在于当前DOM树中，只要选择器唯一即可直接选中。为避免页面存在重名id导致选错元素，优先以模态框根节点为上下文查找内部元素，写法示例：

// 先选中id为inlineForm的模态框根元素，再查找内部的#formveri容器
const modalContent = $('#inlineForm').find('#formveri');

现有代码的问题与修正 #

直接绑定触发按钮click事件的写法可以生效，但存在四个隐患：

1. Ajax传参格式错误，直接传变量值没有键名，后端无法正常读取参数
2. 没有做重复请求拦截，快速点击按钮会触发多次无效请求
3. 模态框关闭后没有重置内容，下次打开会短暂显示上一次加载的旧内容
4. 没有绑定模态框生命周期事件，容易出现内容加载和模态框显示不同步的问题

修正后完整代码 #

$(document).ready(function(){
  // 请求锁，防止重复触发
  let loading = false;

  // 绑定模态框显示前事件，比按钮click事件更贴合模态框生命周期
  $('#inlineForm').on('show.bs.modal', function(event){
    if(loading) return;
    // 获取触发模态框的按钮元素
    const triggerBtn = $(event.relatedTarget);
    const productId = triggerBtn.val();
    // 锁定模态框内的内容容器
    const $container = $(this).find('#formveri');

    // 提前显示加载状态
    $container.html('加载中...');
    loading = true;

    $.ajax({
      url: 'veri.php',
      type: 'POST',
      // 传键值对格式参数，后端通过$_POST['product_id']即可取值
      data: {product_id: productId},
      success: function(res){
        $container.html(res);
      },
      error: function(){
        $container.html('加载失败，请重试');
      },
      complete: function(){
        loading = false;
      }
    });
  });

  // 模态框完全关闭后清空内容，避免下次打开显示旧数据
  $('#inlineForm').on('hidden.bs.modal', function(){
    $(this).find('#formveri').html('');
  });

  // 动态生成的元素绑定事件请用事件委托，示例：
  // $('#inlineForm').on('click', '.动态元素类名', function(){
  //   事件逻辑
  // })
});

操作注意事项 #

• 操作时机匹配需求：
  • 模态框显示前修改内容、发起请求用show.bs.modal事件
  • 模态框完全显示后做输入框聚焦、第三方插件初始化用shown.bs.modal事件
  • 模态框关闭后重置表单、清空内容用hidden.bs.modal事件
• 所有模态框内部元素的查找，都建议从模态框根节点$('#inlineForm')往下查找，避免选择器冲突
• 动态插入的元素不要直接绑定事件，统一用事件委托绑定到模态框根节点上，避免事件失效

内容的提问来源于stack exchange，提问作者Ismail Yanık