Javascript iframe附加到创建副本

我有这个jQuery代码，但当我尝试执行它时，它会在返回到其正式状态时复制

blok2

。有人知道如何解决这个问题吗

每当我点击我的blok，它就会像预期的那样展开并显示到视频中。但是，当我单击以缩小它时，它会复制iframe，并且不会隐藏它。我尝试了一些解决方案，但我不知道如何取消隐藏iframe，它不会出现问题

$（文档）.ready（函数（）{
$（“.blok2”）。单击（函数（）{
$（“.codeAccademy”）.toggle（）；
});
$（“.blok2”）。单击（函数（）{
$("", {
src:“https://www.youtube.com/embed/07Q6aUPfqkM"
}).附于（“.blok2”）；
});
});
.rij1{
显示器：flex；
宽度：500px；
}
.rij2{
显示器：flex；
宽度：500px；
}
blok1先生{
背景色：卡德蓝；
高度：250px；
宽度：250px；
}
blok2先生{
背景色：淡紫色；
高度：250px；
宽度：250px；
}
布洛克先生3{
背景色：暗绿色；
高度：250px；
宽度：250px；
}
布洛克先生4{
背景颜色：珊瑚；
高度：250px；
宽度：250px；
}
国际编码学院{
显示：块；
宽度：100%；
高度：自动；
内容：url（“http://s3.amazonaws.com/codecademy-blog/assets/logo_blue_dark.png");
}
该问题是由于在
blok2
元素上附加了两个click事件处理程序，它们都在每次单击时执行；它们不会像您期望的那样连续单击

要解决这个问题，您可以使用一个单击事件处理程序来检查
blok2
元素中是否已经存在
iframe
。如果有，它将删除它并显示codecademy图像。如果没有，它将创建iframe并隐藏图像。大概是这样的：


$（文档）.ready（函数（）{
$（“.blok2”）。单击（函数（）{
var$iframe=$（this.find（'iframe'）；
if（$iframe.length）{
$（“.codeacademy”）.show（）；
$iframe.remove（）；
}否则{
$（“.codeAccademy”）.hide（）；
$("", {
src:“https://www.youtube.com/embed/07Q6aUPfqkM"
}).附于（“.blok2”）；
}
});
});
.rij1{
显示器：flex；
宽度：500px；
}
.rij2{
显示器：flex；
宽度：500px；
}
blok1先生{
背景色：卡德蓝；
高度：250px；
宽度：250px；
}
blok2先生{
背景色：淡紫色；
高度：250px；
宽度：250px；
}
布洛克先生3{
背景色：暗绿色；
高度：250px；
宽度：250px；
}
布洛克先生4{
背景颜色：珊瑚；
高度：250px；
宽度：250px；
}
国际编码学院{
显示：块；
宽度：100%；
高度：自动；
内容：url（“http://s3.amazonaws.com/codecademy-blog/assets/logo_blue_dark.png");
}
没问题，如果有帮助，不要忘记接受答案。