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

我认为你的事件监听器是在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"));
});

Answer 2

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

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

如果你想调用每个模态，请使用start这样的选择器：

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

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

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

当bootstrap模式打开时调用Jquery函数

2 个答案: