Bootstrap 4模态事件未触发

Question

我有一个网页，上面有一个图像轮播，而不是将youtube视频嵌入到轮播中，我将图像带有youtube图标，然后单击带有youtube视频的模式打开。

由于轮播会动态获得图片和youtube链接，因此我将youtube链接放入了触发模式的div中。

问题是模式已打开，但'show.bs.modal'或'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（）{}）;]下