引入PHP文件中jQuery选择器失效，模态框无法显示求助

看起来你的核心问题是：当Bootstrap模态框代码放在被include的alerts.php文件中时，AJAX成功回调里无法触发模态框显示，但直接把模态框代码放到主文件admin-dashboard.php就完全正常。下面是几个针对性的分析和解决方案：

1. 先排查基础加载问题 #

首先要确认两个关键前提：

• 模态框是否真的被渲染到页面中：右键打开浏览器的「查看页面源代码」，搜索reduceqty-modal，如果找不到这个ID的元素，说明alerts.php的路径或者include逻辑有问题，需要先修正服务器端的引入代码。
• 脚本加载顺序是否正确：必须保证加载顺序是：jQuery → Bootstrap JavaScript文件 → dashboard-utilities.js。如果Bootstrap JS在jQuery之前加载，或者你的自定义JS在Bootstrap之前加载，modal()方法会直接失效。

可以在浏览器控制台执行以下代码快速验证：

console.log($('#reduceqty-modal').length); // 返回1表示元素存在，0则说明未渲染
console.log(typeof $('#reduceqty-modal').modal); // 返回"function"表示Bootstrap JS加载正常

2. 优化事件绑定逻辑（核心修复） #

你的代码在每次AJAX成功时都会重复绑定hidden.bs.modal事件，多次触发后会导致事件冲突，甚至阻塞模态框的正常显示。建议把事件绑定移到AJAX回调外部，确保只绑定一次：

修正后的reduceQuantity函数： #

// Reduce quantity button script
function reduceQuantity(item) {
 $.ajax({
 method: 'get',
 url: '../dbqueries/reduceQuantity.php',
 data: {
 'current_item': item,
 },
 success: function() {
 $('#reduceqty-modal').modal('show');
 }
 });
}

// 把模态框隐藏事件绑定移到全局，DOM加载完成后只绑定一次
$(document).ready(function() {
 $('#reduceqty-modal').on('hidden.bs.modal', function () {
 window.location.reload();
 });
});

这样不管模态框代码在主文件还是引入文件中，只要页面加载完成，事件就会被正确绑定，而且不会出现重复绑定导致的异常。

3. 备选方案：使用事件委托（应对动态加载场景） #

如果你的alerts.php是通过AJAX动态加载的（而非服务器端include），可以用事件委托绑定到父级元素上，确保元素存在时能触发事件：

$(document).on('hidden.bs.modal', '#reduceqty-modal', function () {
 window.location.reload();
});

不过根据你的描述，alerts.php是服务器端引入的，这个方案更多是作为兜底选项。

4. 优化模态框HTML（可选） #

你的模态框里有个「Save changes」按钮，但当前逻辑不需要保存操作，虽然不影响显示，但可以简化代码让结构更清晰：

<!-- Reduce quantity modal -->
<div id="reduceqty-modal" class="modal" tabindex="-1" role="dialog">
 <div class="modal-dialog" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title">Quantità ridotta</h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body">
 <p>Quantità di "<?php echo $_GET['current_item']; ?>" diminuita!</p> <!-- 可以动态显示物品名称 -->
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 </div>
 </div>
 </div>
</div>

总结 #

最可能的原因是脚本加载顺序错误，或者重复绑定事件导致的异常。先通过控制台验证基础加载情况，再优化事件绑定逻辑，应该就能解决模态框无法显示的问题。

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