如何让jQuery在Owl Carousel 2中找到.owl-video-frame类

这个问题其实是动态DOM元素的常见坑——.owl-video-frame并不是页面加载时就存在于DOM里的，而是Owl Carousel在处理视频内容时动态生成的，所以直接用$('.owl-video-frame')肯定抓不到。下面给你两种靠谱的解决思路：

方法一：利用Owl Carousel的回调事件 #

Owl提供了一系列生命周期回调，我们可以在轮播初始化完成或者切换时，去获取已经生成的.owl-video-frame元素：

// 先初始化你的轮播
$('#owl4').owlCarousel({
  // 这里填你的轮播配置，比如：
  loop: true,
  margin: 15,
  nav: true,
  responsive: {
    0: { items: 1 },
    768: { items: 2 }
  },
  // 轮播初始化完成后触发
  onInitialized: function(event) {
    // 此时所有动态生成的元素都已存在于DOM中
    const videoFrames = $('#owl4 .owl-video-frame');
    console.log('找到的视频框架元素：', videoFrames);
    // 这里可以对videoFrames做你需要的操作，比如修改样式、绑定事件等
  },
  // 可选：每次轮播切换后触发，方便获取当前活跃项的视频框架
  onChanged: function(event) {
    const currentItemFrame = event.item.find('.owl-video-frame');
    console.log('当前活跃项的视频框架：', currentItemFrame);
  }
});

方法二：使用jQuery事件委托（适合绑定事件场景） #

如果你需要给.owl-video-frame绑定事件（比如点击、加载完成），用事件委托更稳妥——不管元素什么时候动态生成，事件都会被正确触发：

// 给父容器#owl4绑定事件，监听子元素.owl-video-frame的行为
$('#owl4').on('click', '.owl-video-frame', function() {
  // $(this)就是当前被点击的.owl-video-frame元素
  console.log('视频框架被点击了', $(this));
  // 这里可以添加你的逻辑，比如暂停视频、显示提示等
});

// 比如监听视频iframe加载完成
$('#owl4').on('load', '.owl-video-frame iframe', function() {
  console.log('视频iframe加载完成', $(this));
});

额外提示 #

不要在页面加载完成后直接调用$('.owl-video-frame')，因为此时Owl可能还没完成初始化和动态元素的渲染，结果会是空的。一定要等轮播的初始化回调触发后再去获取元素。

内容的提问来源于stack exchange，提问作者user3389097