Question

我正在尝试这样做，当您点击视频缩略图时，视频会在引导模式窗口内的iframe中弹出。现在我不知道我做错了什么，但脚本有时打开带有源的模态窗口，有时它没有源。它似乎永远不会打开最后四个视频。

这似乎是随机的，对我来说毫无意义。此外，它似乎不喜欢在类别之间切换。

以下是我怀疑可能破坏内容的一些JS代码。更多细节可以在附件和小提琴中找到。

function showVideos(channel) {
if (!isFirstPass) {
    $('#addedContent').remove();
}
$('#dropdownVideoPicker').append('<div id="addedContent"></div>');

var arr = $.map(channel, function (data) {
    getTitle(data);
});

$.when.apply($, arr).then(function () {
    $('#addedContent').hide();
    $('#addedContent').slideDown();
    isFirstPass = false;
    $("html, body").animate({
        scrollTop: ($('.category-shape:nth-of-type(6)').offset().top)
    }, 1000);
    console.debug('got only here');
    grabYtId();
});
}


function grabYtId() {
console.debug('got here 1.0');
$('.videoThumbnail').on('click', function () {
    console.log('got here 1.1');
    var $ytId = $(this).attr('src').slice(27, -6);
    console.log($ytId);
    showModalWindow($ytId);
});
}


function showModalWindow(Id) {
var $theModal = $("#videoModal"),
    iframe = $("#iframe"),
    videoSRC = 'https://www.youtube.com/embed/' + Id,
    videoSRCauto = videoSRC + "?autoplay=1&rel=0&controls=1&showinfo=0";
iframe.attr('src', videoSRCauto);
$('button.close').click(function () {
    iframe.attr('src', ' ');
});
$theModal.on("hidden.bs.modal", function () {
    iframe.attr('src', ' ');
});
}

链接到实时网站，如果你想看看它的外观是什么

https://vast-atoll-28054.herokuapp.com/video.php

小提琴链接（我无法在此处进行Ajax调用）：

https://jsfiddle.net/ebkgry99/2/

我认为这可能与此部分有关

function grabYtId() {
console.debug('got here 1.0');
$('.videoThumbnail').on('click', function () {
    console.log('got here 1.1');
    var $ytId = $(this).attr('src').slice(27, -6);
    console.log($ytId);
    showModalWindow($ytId);
});
}

但我不确定。

我认为这个事件是在错误的时间附上的。

Answer 1

事实上，听众$('.videoThumbnail').on('click'...从未应用于内容，因为尚未有.videoThumbnail个节点。

你应该在你的异步回调中调用grabYtId()，如下所示：

$.when.apply($, arr).then(function() {
    $('#addedContent').hide();
    $('#addedContent').slideDown();
    isFirstPass = false;
    $("html, body").animate({
        scrollTop: ($('.category-shape:nth-of-type(6)').offset().top)
    }, 1000);
    console.debug('got only here');

    // Put it here when there should be .videoThumbnail in the DOM tree already
    grabYtId();
});

如果不是正确的地方，您可以在调用grabYtId()时执行以下代码：

解决方案2

var t, counter = 0;
t = setInterval(function(){
  counter++;
  if(counter === 100) {
    // Stop interval if it fails 100 times to find nodes
    clearInterval(t);
  }

  var videoNodes = $('.videoThumbnail');
  if(!videoNodes.length) return;

  clearInterval(t);
  grabYtId();
}, 300);

等待.videoThumbnail添加到DOM然后附加侦听器。

解决方案3：

您可以尝试但只应用一次：

$('#addedContent').on('click', '.videoThumbnail', function(){
  var $ytId = $(this).attr('src').slice(27, -6);
  showModalWindow($ytId);
});

Answer 2

间隔不是解决此问题的好方法。

稍后才能处理添加到DOM的元素事件的正确解决方案是事件委托。

你想要这样的东西，

$('#addedContent').on('click', '.videoThumbnail', function () {
// ^^^^^^^^^^^^^ this binds a click handler to the already existing
// #addedContent container element,
//                     and this ^^^^^^^^^^^^^^^ makes it execute your
//                callback function only when the event happend on such an element     
    console.log('got here 1.1');
    var $ytId = $(this).attr('src').slice(27, -6);
    console.log($ytId);
    showModalWindow($ytId);
});

并且您要删除grabYtId函数，而是将此代码放置在一次的位置。

由于你小提琴中的AJAX东西不起作用，很难创建一个实例来证明这一点;但是如果您只是将上面的代码片段复制并粘贴到浏览器控制台并按下回车键，在页面完全加载后，在您按下其中一个“加载视频”按钮之前，您应该已经看到它基本上正常工作。

模态窗口内的iframe不会更改源

2 个答案: