当Bootstrap模式打开时，我如何调用函数？

我使用Boostrap 3.7和Blade(Laravel 5.5)。

我正在尝试在引导模式打开时显示console.log('works')，但它不起作用。

HTML：

@foreach(...)

    ...

    <div class="modal fade" id="reservationModal" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
        <div class="modal-dialog">
            ...
        </div>
    </div>
@endforeach

js：

$('#reservationModal').on('shown.bs.modal', function (e) {
    console.log('works');
});

我遵循此文档：https://getbootstrap.com/docs/3.3/javascript/#modals

我已经读过了：Calling a function on bootstrap modal open

感谢您的帮助！

编辑1：

我用以下代码解决了问题：

$(document).on('show.bs.modal', '#reservationModal', function (e) {
    console.log('works');
});

但如何区分情态动词(因为它们进入foreach循环)？

类似：

$(document).on('show.bs.modal', '#reservationModal-specificId', function (e) {
    console.log('works');
});

Html

我认为您的事件侦听器是在推荐答案打印之前创建的。 因此，请尝试此代码。

$(document).on('show.bs.modal', '#reservationModal', function (e) {
    console.log('works');
});

$(文档).on(‘show.bs.modal’，‘#Reserve vationmodal’，Function(E){})；

粗体字符有助于识别您的模式

您的更新部件的答案

运行循环并创建您的模型，如下所示

<div class="modal fade reservationModal" id="reservationModal1" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
    <div class="modal-dialog">
        ...
    </div>
</div>

<div class="modal fade reservationModal" id="reservationModal2" tabindex="-1" role="dialog" aria-labelledby="reservationModal" aria-hidden="true">
    <div class="modal-dialog">
        ...
    </div>
</div>
...... and so on

以类的形式提供presvationMoal

并将id作为递增的值追加到其后面

$(document).on('show.bs.modal', '.reservationModal', function (e) {
    console.log($(this).attr("id"));
});