如何将 jquery 函数应用于动态创建的元素？答案

【问题标题】：How to apply jquery function to a dynamically created element?如何将 jquery 函数应用于动态创建的元素？
【发布时间】：2016-02-22 15:02:04
【问题描述】：

我正在使用FitVids.js 动态调整我的视频大小。我还有一个小脚本来制作它，这样我就可以单击图像并将图像替换为 YouTube 视频。但是，这些视频没有应用 fitvids 脚本。

这是视频和替换脚本

<img id="homevideo" src="image.jpg" 
data-video="http://www.youtube.com/embed/[URL-key]?autoplay=1">

<script>
jQuery(document).on('click','#homevideo',function(e){
    var video = '<iframe id="feature_video" src="'+jQuery(this).attr('data-video') +'" width="400" height="300"></iframe>';
    jQuery(this).replaceWith(video);
});
</script>

这是我在创建元素时需要应用到元素的脚本

jQuery("#feature_video").fitVids();

【问题讨论】：

如果你在使用replaceWith(...);之后调用它呢？？？
是的，我试过了。由于某种原因似乎不起作用。
你能提供一个小提琴吗？
我认为您遇到的问题与此处解决的问题相同：stackoverflow.com/questions/6118778/…，可能是一个重复的问题

标签： jquery

【解决方案1】：

您可以使用填充使 iframe 保持适当的比例。

这里有一份来自 CSS-Tricks 的关于如何操作的指南。您可以向下滚动到“视频（YouTube、Vimeo 等）”部分。

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

编辑：好的，我已经做了一些研究，您的问题是您应该在视频容器上调用fitVids()，而不是在您创建的视频上。

<script>
jQuery(document).on('click','#homevideo',function(e){
 var video = '<iframe id="feature_video" src="'+jQuery(this).attr('data-video') +'" width="400" height="300"></iframe>';
 jQuery(this).replaceWith(video);
 jQuery('body').fitVids();
});
</script>

这应该可以解决您的问题。如果需要，您可以在更具体的容器上使用它。

【讨论】：