jQuery刪除vimeo iframe

Question

我有一個小腳本，可將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>

Answer 1

您的監聽器無法觸發，因為您正在監聽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>');
});

Answer 2

如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代碼，因此實際上可以單擊play_button。）