admin管理员组

文章数量:1278792

I use Boostrap 3.7 and Blade (Laravel 5.5).

I'm trying to display console.log('works') when my boostrap modal opens but it didn't work.

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

I followed this doc : .3/javascript/#modals

And I already read that : Calling a function on bootstrap modal open

Thank's for help !

EDIT 1:

I solved the problem with this code : 

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

But how to differenciate modals (because they are into foreach loop)?

Something like :

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

I use Boostrap 3.7 and Blade (Laravel 5.5).

I'm trying to display console.log('works') when my boostrap modal opens but it didn't work.

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

I followed this doc : https://getbootstrap./docs/3.3/javascript/#modals

And I already read that : Calling a function on bootstrap modal open

Thank's for help !

EDIT 1:

I solved the problem with this code : 

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

But how to differenciate modals (because they are into foreach loop)?

Something like :

$(document).on('show.bs.modal', '#reservationModal-specificId', function (e) {
    console.log('works');
});
  • javascript
  • jquery
  • bootstrap-modal
  • laravel-blade
Share Improve this question edited Mar 18, 2022 at 13:20 isherwood 61.1k16 gold badges120 silver badges169 bronze badges asked Dec 22, 2017 at 11:37 RoyceRoyce 1,5956 gold badges26 silver badges54 bronze badges 9
  • 3 You're using the right event, however it looks like you're duplicating the reservationModal id multiple times as you're creating that element in a loop. That's likely to be the cause of your problem – Rory McCrossan Commented Dec 22, 2017 at 11:40
  • where have you written this JS code? is it after the modal created? – Faraz PV Commented Dec 22, 2017 at 11:42
  • @FarazPV I think not because JS file is called on the <head></head> – Royce Commented Dec 22, 2017 at 11:50
  • @RoryMcCrossan and how can I solved this ? With an id on the id='reservationModal' like id='reservationModal-3' ? But if do this, how detect that it's the modal 3 or modal 6 which is open ? – Royce Commented Dec 22, 2017 at 11:52
  • give this code after @endforeach – Faraz PV Commented Dec 22, 2017 at 11:53
 |  Show 4 more ments

2 Answers 2

Reset to default 5

I think your event listeners are created before HTML printing. So try this code.

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

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

the bold characters will help to identify your modal

ANSWER FOR YOUR UPDATED PART

run the loop and create your modal as follows

<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

Give reservationModal as class

and id as an incremented value appended to it

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

As pointed out by @Rory McCrossan in a ment, the duplication of the id is the key problem of your code. To fix this, you may use index:

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

And use start with selector like this if you want to call on each modal:

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

Or, just use indexed selector to use on particular modal:

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

本文标签： javascriptHow can I call a function when a Bootstrap modal is openStack Overflow

版权声明：本文标题：javascript - How can I call a function when a Bootstrap modal is open? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741292687a2370639.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。