动态修改Bootstrap模态框ID后，内部自动完成JS失效求助

嘿，我来帮你搞定这个问题！你的核心困境很明确：把模态框ID改成动态绑定MySQL行ID后，原本正常的自动完成脚本罢工了——这几乎可以肯定是脚本里的选择器和新的动态ID不匹配导致的。

问题根源 #

原来的procura-paciente.js里，大概率是用了固定的ID选择器（比如$('#modalAdicao .autocomplete-input')）来绑定自动完成功能。但现在你给每个模态框的ID加上了$idModal后缀，变成了#modalAdicao1、#modalAdicao2这类动态值，JS自然找不到对应的元素，功能也就失效了。

两种可行的解决方案 #

方案1：用通用类+事件委托（推荐，代码更优雅）

给所有动态模态框添加一个通用的类名，比如modal-adicao，然后借助Bootstrap模态框的shown.bs.modal事件（这个事件会在模态框完全显示后触发），针对当前显示的模态框初始化自动完成：

1. 修改模态框的HTML（PHP部分）：

<div id="modalAdicao<?php echo htmlspecialchars($idModal); ?>" class="modal fade modal-adicao" tabindex="-1" role="dialog">
  <!-- 模态框内部内容，包括自动输入框 -->
</div>

2. 调整procura-paciente.js的代码：

// 监听所有带modal-adicao类的模态框的显示事件
$(document).on('shown.bs.modal', '.modal-adicao', function() {
  // 找到当前模态框内的自动完成输入框，初始化功能
  $(this).find('.paciente-autocomplete').autocomplete({
    // 你的自动完成配置项，比如：
    source: '/procura-pacientes.php',
    minLength: 2,
    select: function(event, ui) {
      // 选中项后的逻辑
    }
  });
});

这个方案的好处是不管生成多少个动态模态框，都能统一处理，不需要重复写代码。

方案2：针对每个动态ID单独初始化（适合特殊配置场景）

如果不同模态框的自动完成逻辑有差异，你可以在PHP循环生成模态框时，直接内联一段脚本绑定当前模态框的事件：

<div id="modalAdicao<?php echo htmlspecialchars($idModal); ?>" class="modal fade" tabindex="-1" role="dialog">
  <!-- 模态框内部内容 -->
  
  <script>
    // 针对当前动态ID的模态框绑定显示事件
    $('#modalAdicao<?php echo htmlspecialchars($idModal); ?>').on('shown.bs.modal', function() {
      $(this).find('.paciente-autocomplete').autocomplete({
        // 这里可以写当前模态框专属的配置
      });
    });
  </script>
</div>

这种方式虽然会生成重复的JS代码，但灵活性更高，适合每个模态框需要不同自动完成源的场景。

关键注意点 #

一定要用shown.bs.modal事件来触发初始化，而不是页面加载时直接执行。因为PHP循环生成的模态框可能在页面加载时就存在，但如果是异步加载的（比如通过AJAX），页面初始化时元素还没出现在DOM里，直接绑定会失败；而模态框显示时，元素肯定已经渲染完成了。

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