Bootstrap 4 модальных событий не стреляет

Question

У меня есть веб-страница, на которой у меня есть карусель изображений, и вместо того, чтобы встраивать видео YouTube в карусель, я поместил изображение со значком YouTube и по его щелчку откройте модальное окно с видео YouTube.

Поскольку карусель динамически подается на изображения и ссылку на youtube, я поместил ссылку на youtube в div, который запускает модал.

Проблема в том, что модал открывается, но 'show.bs. модальные события 'или' hide.bs.modal 'не работают, поэтому они никогда не получают ссылку на видео YouTube.

HTML

<!--Carousel-->

<div id="carouselIndicatorsDiv" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators filterInvert1">

    </ol>
    <div class="carousel-inner">

    </div>
    <a class="carousel-control-prev" href="#carouselIndicatorsDiv" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon filterInvert1" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselIndicatorsDiv" role="button" data-slide="next">
        <span class="carousel-control-next-icon filterInvert1" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<!--Modal-->

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

JQuery

//Appended other images, appending image for modal click

$(".carousel-inner").append('<div id="ytSrcLink" class="carousel-item cursorPointer" data-toggle="modal" data-target="#ytSubsModal" src="https://www.youtube.com/embed/HHncD0yt71c?autoplay=1"><img class="d-block position-relative w-100" src="img/1/thumbnail.jpg"><img src="img/youtubeIcon.svg" class="position-absolute center youtubeIconStyle"></div>');

// Modal

var videoYtSubsSource;

$("#ytSrcLink").on('click', function(){
    videoYtSubsSource = $(this).attr('src');
    assignYtSubsSrc(videoYtSubsSource);
});

// Youtube Modal
var ytSubsSrc;

function assignYtSubsSrc(videoUrl){
    ytSubsSrc=videoUrl;
}

$(document).on('show.bs.modal', "#ytSubsModal", function(e) {
    $('#ytSubsVideo').attr('src',ytSubsSrc); 
});

$(document).on('hide.bs.modal', "#ytSubsModal", function(e) {
    $('#ytSubsVideo').attr('src','');
});

Я даже пытался просто вставить модальный вызывающий div в HTML, а затем попробовать, но это тоже не сработало. Я думаю, что упускаю что-то простое, но не уверен, что.

Answer 1

Я заставил это работать, очевидно, проблема заключалась в том, что я включил весь код jquery, упомянутый в вопросе, в $ (document) .ready (function () {});

Принимая во внимание события Bootstrap для показаи скрыть пришлось поставить вне функции document.ready.

Но я до сих пор не уверен, почему это так, может кто-нибудь направить?