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

我让它工作了，显然问题是我在 $(document).ready(function() {}); 下包含了问题中提到的整个 jquery 代码；

而 Bootstrap 的显示和隐藏事件必须放在 document.ready 函数之外。

但我还是不知道为什么会这样，谁能指导一下？