引导模式打开时调用 Jquery 函数

Question

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

我试图console.log('works')在我的 boostrap 模式打开时显示，但它没有用。

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

我已经读过：在引导模式打开时调用函数

感谢帮助 ！

编辑 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');
});

Answer 1

我认为您的事件侦听器是在 HTML 打印之前创建的。所以试试这段代码。

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

$(document).on('show.bs.modal', '#reservationModal' , 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

将reservationModal作为类

和 id 作为附加到它的增量值

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