jquery remove vimeo iframe

jquery remove vimeo iframe

本文关键字：iframe vimeo remove jquery      更新时间：2023-09-26

我有一个小脚本，它将vimeo视频加载到div onclick中，然后用一个"应该"删除它的按钮onclick。不用说，如果它有效，如果我还没有在堆栈中的其他地方找到一个有效的解决方案，我就不会在这里发布，所以…这里是我的代码：

$('.play_button').click(function() {
  $( ".play_border, .styled-header" ).remove();
  $( ".video-container" ).append( '<iframe id="vimeo" src="//player.vimeo.com/video/103277178?autoplay=1" width="100%" height="306" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><div class="form-transparent"><button class="btn pull-right close_video" type="button">Close Video</button>');
});
$('.close_video').click(function() {
  $( "#vimeo" ).remove();
  $( ".video-container" ).append( '<div class="play_border"><div class="play_button"></div></div><h2 class="white styled-header">Play Our Video</h2>');
});

和html:

<div class="video-container">
    <div class="play_border">
        <div class="play_button"></div>
    </div>
    <h2 class="white styled-header">Play Our Video</h2>
</div>

正如beaglebets所提到的，您的监听器没有开火，因为您试图在它存在之前将其添加到close_video中。你可以这样做：

function show_video() {
  $( ".play_border, .styled-header" ).remove();
  $( ".video-container" ).append( '<iframe id="vimeo" src="//player.vimeo.com/video/103277178?autoplay=1" width="100%" height="306" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe><div class="form-transparent"><button class="btn pull-right close_video" type="button">Close Video</button>');
  $( ".close_video" ).click(hide_video);
}
function hide_video() {
  $( "#vimeo, .close_video" ).remove();
  $( ".video-container" ).append( '<h2 class="white styled-header">Play Our Video</h2><div class="play_border"><button class="btn play_button" type="button">Play</button></div>');
  $( ".play_button" ).click(show_video);
}
$( ".play_button" ).click(show_video);

http://jsfiddle.net/L5jcLLxz/

（我稍微修改了您的HTML代码，这样实际上就可以点击播放按钮了。）

您的侦听器没有启动，因为您在将close_video附加到页面之前正在侦听它。由于要将其添加到页面中，因此需要使用事件委派。

$('.video-container').on('click', '.close_video', function() {
  $( "#vimeo" ).remove();
  $( ".video-container" ).append( '<div class="play_border"><div class="play_button"></div> </div><h2 class="white styled-header">Play Our Video</h2>');
});
相关文章：