当Bootstrap模式打开时,我如何调用函数?

How can I call a function when a Bootstrap modal is open?(当Bootstrap模式打开时,我如何调用函数?)

本文介绍了当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"));
});

这篇关于当Bootstrap模式打开时,我如何调用函数?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:当Bootstrap模式打开时,我如何调用函数?

基础教程推荐