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

Question

我使用Bootstrap 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');
});

但是如何区分模型（因为它们是进入qazxsw poi循环）？

就像是 ：

foreach

Answer 1

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

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

$（document）.on（'show.bs.modal'，'＃readModal'，function（e）{}）;

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

对你的更新部分的答案

运行循环并按如下方式创建模态

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

作为班级给予预约

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

<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

Answer 2

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

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

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

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

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

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