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>
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>');
});
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);
(I changed your HTML code slightly, so that there is actually something to click for play_button.)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.