Bootstrap 4 个模态事件未触发

Question

我有一个网页，上面有一个图片轮播，我没有将 youtube 视频嵌入到轮播中，而是放了一张带有 youtube 图标的图片，然后单击它打开带有 youtube 视频的模态。

由于旋转木马是动态提供图像和 youtube link 的，所以我将 youtube link 放在 div 中，它会触发模态。

问题是模态打开但 'show.bs.modal' 或 'hide.bs.modal' 事件不起作用，因此永远无法获取 YouTube 视频 link。

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 函数之外。

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

Bootstrap 4 个模态事件未触发

Bootstrap 4 modal events not firing

html

jquery

bootstrap-modal

bootstrap-carousel

bootstrap-4