我决定继续将我的网站更新到最新版本的 Bootstrap，版本 5.0，但我很难让模态工作。阅读迁移指南并没有提到打破模态，我的网站以前运行得很好。我的代码使用 javascript/jQuery 在 ajax 加载文本后触发模式。ajax 部分仍然可以正常工作，但是在检索到它后它不会触发模态。我正在使用最新的 bootstrap.bundle.min.js。
$( document ).ready(function() {
$('.hourModal').click(function(){
var obj_id = $(this).data('id');
$.ajax({
url: 'ajax-multi.php',
type: 'POST',
data: {obj_id: obj_id,role:'some_role'},
//dataType: 'html',
success: function(response){
$('.modal-body').html(response);
//$('#hourModal').modal('show'); //Old way that worked great
var hourModal = new bootstrap.Modal(document.getElementById('hourModal'));
hourModal.show(); // New way I tried from the Bootstrap documentation
}
});
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<!-- Button -->
<button type="button" class="btn btn-secondary btn-sm py-0 me-1 hourModal" data-id="1">Blocks</button>
<!-- …