引导modal won't加载youtube嵌入源

Bootstrap modal won't load youtube embed source

本文关键字：youtube 加载 modal won 引导      更新时间：2023-09-26

我有麻烦加载与youtube嵌入模态。我的"视频"是从对youtube数据API的AJAX调用加载的，并使用mustache模板来管理内容显示:

{{#statuses}}
<div class="videoBox col-xs-12 col-md-4 col-lg-4 {{source}}" data-date="{{timestamp}}" data-source="{{source}}"> 
    <div class="videoBox__thumbnail">
        <a class="modal__button videoBox__button" data-toggle="modal" data-src="https://www.youtube.com/embed/{{embed}}" data-video-fullscreen="1" data-width="640" data-height="480" data-target="#myModal">               
            <div class="videoBox__overlay"> </div>
            <div class="videoBox__thumb">
                <img src="{{thumbnail}}" alt="{{{text}}}" />
            </div>
            <div class="videoBox__play">
                    <object data="{{tempURL}}/assets/img/video_player_icon.svg"> </object>
            </div>
            <div class="videoBox__text"> 
                <p><span class="title">{{{text}}}</span> <span class="date">{{{posted}}}</span></p>
            </div>
        </a>
    </div>
</div>
{{/statuses}}

我在一个名为tv.js的文件中使用了这个函数然后我在我的页面中调用这个函数，就像下面这样:

function loadIframeModal() {
$('.modal__button').bind('click', function(e) {
    var src = $(this).attr('data-src');
    var width = $(this).attr('data-width');
    var height = $(this).attr('data-height');
    var allowfullscreen = $(this).attr('data-video-fullscreen'); 
    $("#myModal iframe").attr({
        'src': src,
        'height': height,
        'width': width,
        'allowfullscreen': allowfullscreen
    });
});
$('#myModal').on('hidden.bs.modal', function(){
    $(this).find('iframe').html("");
    $(this).find('iframe').attr("src", "");
});
}

和函数调用

$(document).ready(function(){
    loadIframeModal();
});

加载了模态，但嵌入的内容根本不显示。我想我需要有人帮忙。如果我在click事件中console.log -它没有显示在控制台上，但我已经将点击事件绑定到按钮类，所以我有点困惑。

在AJAX内容加载后绑定事件处理程序

我把我的评论变成一个答案，因为我几乎可以肯定这是你的问题。jQuery的事件绑定方法需要现有的DOM元素才能成功运行。从.on()的文档:

事件处理程序仅绑定到当前选定的元素;他们必须在代码调用.on()时存在。

这意味着要对通过AJAX加载的内容使用事件绑定，您有三个选项:1)丑陋的内联HTML处理程序

使用已经存在于其中的事件处理程序调用注入内容，如<a href="#" onclick="openInModal('whateverID');">。这是一种混合了表示和逻辑的快速而肮脏的方法，但是为了完整起见，我将在这里列出它。

2)加载内容后重新绑定处理程序

为了确保您的新到达具有附加的事件处理程序，您需要在DOM完成加载后再次调用绑定代码。这意味着您在$(document).ready()中的调用将只对初始DOM解析时存在的内容起作用，并且每次加载新的DOM元素时都需要再次调用它—例如在$.ajax()调用的回调函数中。

3)使用委托事件

要保持对.on()的单个调用，也可以在AJAX内容上工作，请阅读jQuery文档中关于.on()的事件委托。基本上，诀窍是不直接将处理程序附加到元素，而是附加到父元素(例如document)，并包含一个选择器来限制处理程序的上下文。只要父元素保持不变，这将对你所提供的选择器的所有当前和将来的元素起作用。

下面是一个使用事件委托的快速示例:

function loadIframeModal() {
    $(document).on('click', '.modal__button', function(e) {
        var src             = $(this).attr('data-src'),
            width           = $(this).attr('data-width'),
            height          = $(this).attr('data-height'),
            allowfullscreen = $(this).attr('data-video-fullscreen');
        $("#myModal iframe").attr({
            'src'               : src,
            'height'            : height,
            'width'             : width,
            'allowfullscreen'   : allowfullscreen
        });
        $('#myModal').on('hidden.bs.modal', function(){
            $(this).find('iframe').html("");
            $(this).find('iframe').attr("src", "");
        });
    });
}
相关文章：