Question

我在使用youtube embed加载模态时遇到问题。我的“视频”从AJAX调用加载到youtube数据API，并使用胡子模板来管理内容显示：

{{#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();
});

模态加载但嵌入根本不显示。我想我需要第二双眼睛。如果我在console.log事件中click - 它没有显示在控制台中，但我将click事件绑定到按钮类，所以我有点困惑。

Answer 1

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

我将评论转为答案，因为我几乎可以肯定这是你的问题。 jQuery的事件绑定方法需要现有的DOM元素才能成功运行。来自docs for .on()：

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

这意味着要使用通过AJAX加载的内容使用事件绑定，您有三个选项：

1）丑陋的内联HTML处理程序

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

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

为了确保您的新到货附加了事件处理程序，您需要在DOM完成加载后再次调用绑定代码。这意味着您在$(document).ready()内的调用仅适用于初始DOM解析时出现的内容，并且每次加载新的DOM元素时都需要再次调用它 - 例如在{{1的回调函数中调用。

3）使用委派活动

要同时调用可以处理AJAX内容的$.ajax()，请阅读event delegation in the jQuery docs for .on()。基本上，诀窍是不将处理程序直接附加到元素，而是附加到父元素（例如.on()）并包括选择器以限制处理程序的上下文。只要父元素保持不变，这将适用于所提供的所有当前和未来元素。

以下是使用事件委派的代码的快速示例：

document

Bootstrap模态不会加载youtube嵌入源

1 个答案:

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

1）丑陋的内联HTML处理程序

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

3）使用委派活动