Почему не срабатывает JS по триггерам show.bs.modal и hide.bs.modal?

Question

[Дмитрий]

Всем привет.

Делаю воспроизведение видео с youtube в модальном окне на сайте.

Код страницы:

{% extends 'base.html' %}

<div class="container">
        <button type="button" class="btn btn-outline-light video-btn" data-toggle="modal"
                    data-src="{{ какой-то url }}" data-target="#myModal">Посмотреть</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
             aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                 </button>
                 <div class="embed-responsive embed-responsive-16by9">
                     <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
                                    allow="autoplay"></iframe>
                  </div>
             </div>
        </div>
     </div>
   </div>
</div>

<script>
        $(document).ready(function () {
            var $videoSrc;
            $('.video-btn').click(function () {
                $videoSrc = $(this).data('src');
            });
            $('#myModal').on('show.bs.modal', function (e) {
                $("#video").attr('src', $videoSrc + "?autoplay=1&amp;modestbranding=1&amp;showinfo=0");
            });
            $('#myModal').on('hide.bs.modal', function (e) {
                $("#video").attr('src', $videoSrc);
            });
        });
    </script>

Bootstrap и JQuery у меня подключаются в base.html, а на странице с кнопкой просто его расширяю.

Проблема заключается в том, что по нажатию кнопки, у меня JS вытаскивает url и запихивает в переменную, но далее скрипт не выполняется.

Однако, если Bootstrap и JS подключить прям перед скриптом, то он отрабатывает полностью.

В чем может быть проблема? Заранее благодарен.

P.S.: В скрипте прописывать вместо «$('#myModal').on('show.bs.modal', function (e) { » « $(document).on('show.bs.modal', '#myModal', function (e) {» пробовал, не помогает.

Answer 1

[Дмитрий]

Проблема решена! Оказалось у меня было подключено несколько версий jQuery и из-за этого скрипт не отрабатывал.