jQuery删除vimeo iframe

Question

I have a small script that loads a vimeo video into a div onclick and then a button that "should" remove it onclick. needless to say I wouldn't be posting here if it was working and if i hadn't already found a working solution elsewhere in stack so...here my code:

$('.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>');
});

and the 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

Your listener isn't firing because you are listening for the close_video before it has been appended to the page. Since you are adding it to the page you will need to use event delegation.

$('.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

As mentioned by beaglebets your listener isn't firing, because you are trying to add it to close_video before it exists. You could do it this way instead:

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/

(I changed your HTML code slightly, so that there is actually something to click for play_button.)