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

Question

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

我试图在我的 boostrap 模式打开时显示 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');
});

Answer 1

正如@Rory McCrossan 在评论中指出的那样，id 重复是代码的关键问题。要解决此问题，您可以使用索引：

id="reservationModal-{{$loop->index}}"

如果您想调用每个模态，请使用这样的选择器开始：

$('[id^="reservationModal-"]').on('shown.bs.modal', function (e) {
    console.log('works');
});

或者，仅使用索引选择器在特定模态上使用：

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

Answer 2

我认为您的事件侦听器是在 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 设为 class

并将 id 作为附加到它的增量值

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

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

How can I call a function when a Bootstrap modal is open?

javascript

jquery

bootstrap-modal

laravel-blade