Javascript 通过代码片段中的注释，它将单个事件处理程序附加到已经存在的#addedContent元素。由于事件在DOM中冒泡，因此这将“捕获”在#addedContent的子元素上发生的所有单击事件-所有这些事件，无论是哪个元素。通过在第二个中指定'.videoThu

---

通过代码片段中的注释，它将单个事件处理程序附加到已经存在的

#addedContent

元素。由于事件在DOM中冒泡，因此这将“捕获”在

#addedContent

的子元素上发生的所有单击事件-所有这些事件，无论是哪个元素。通过在第二个

中指定
'.videoThumbnail'
。然后在
参数上告诉jQuery所有可能的单击事件，您希望函数只处理类为
videoThumbnail
的元素上实际发生的事件。这个检查发生在点击发生的时候，所以当这个元素被添加到DOM中时就不再重要了。很抱歉，我还是不明白。所以每次单击
#addedContent
时，它都会将侦听器附加到类中？我只是不明白所有的异步是如何工作的以及为什么工作的。
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', ' ');
});
}

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);
});
}

$.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();
});

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);

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

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