javascript - JQuery Button Not Clickable Second Time? -


i have used youtube iframe api play youtube video on button click. html code gets replaced youtube iframe video code on button click. when video ended previous html code gets replaced. how button clicks not working second time. please !

this code html , jquery

jquery(document).ready(function () {    jquery('.play_button').click(function(e){  	    	var html_sidebar = jquery(this).closest(".sidebar-container2").html();  	    	var player;  	    	e.preventdefault();  		        player = new yt.player('video-play', {  		        	height: '345px',  		          	width: '100%',  		          	videoid: '7o0nkfdp2s4',  		          	events: {  		            'onready': onplayerready,  		            'onstatechange': onplayerstatechange  		          }		      		        });    		        		    // autoplay video  		    function onplayerready(event) {  		        event.target.playvideo();  		    }    		    // when video ends  		    function onplayerstatechange(event) {          		        if(event.data === 0) {  		        	jquery('#tertiary1').html(html_sidebar);  		        }  		    }  	    });          jquery('#watch-video').click(function (e) {          var html_sidebar = jquery(this).closest(".sidebar-container2").html();          var player;          e.preventdefault();          player = new yt.player('video-play', {              height: '345px',              width: '100%',              videoid: '7o0nkfdp2s4',              events: {                  'onready': onplayerready,                  'onstatechange': onplayerstatechange              }          });                // autoplay video          function onplayerready(event) {              event.target.playvideo();          }            // when video ends          function onplayerstatechange(event) {              if (event.data === 0) {                  jquery('#tertiary1').html(html_sidebar);              }          }      });  });
<div role="complementary" class="sidebar-container2" id="tertiary1">      <div id="video-play" class="widget-1 widget-first widget-last widget-odd widget_video">          <div class="textwidget">              <div class="video_container">                  <span class="play_button"></span>                  <div class="video-text">                      <h3>delivering change foundation</h3>                      <p>dcf independent organization partners governments , communities accomplish nation transformation.</p>                      <p><a id="watch-video" class="yellow_arrow">watch video      </a></p>                  </div>              </div>          </div>      </div>  </div>  <script type='text/javascript' src="https://www.youtube.com/iframe_api"></script>

what can ? new jquery tried find solution no results.

you need use event delegation original html markup being altered.

the event handler bound initial #watch-video gets replaced , added again, events lost.

jquery(document).on('click','#watch-video',function(){  });

you can use static parent instead of jquery(document), delegate event in case is:

jquery('#tertiary1').on('click','#watch-video',function(){  });

update:

if have multiple button triggers, use combined selector,

jquery('#tertiary1').on('click','#watch-video,.play_button',function(){  })

Comments

Post a Comment

Popular posts from this blog

How to connect android app to App engine -

i'm trying connect app in android server i've opened on appengine. my server's name : dddd-daniel-2345 , website server : http://dddd-daniel-2345.appspot.com/ this how connect android app server in app engine: app.yaml: application: dddd-daniel-2345 version: 1 runtime: python27 api_version: 1 threadsafe: yes handlers: - url: .* script: main.app libraries: - name: webapp2 version: "2.5.2" main.py: #!/usr/bin/env python # # copyright 2007 google inc. google.appengine.api import users import webapp2 class userhandler(webapp2.requesthandler): def get(self): user = users.get_current_user() if user: greeting = ('%s,%s,%s' % (user.email(),user.user_id(),user.nickname())) else: greeting = ('not logged in') self.response.out.write(greeting) app = webapp2.wsgiapplication([('/', userhandler),], debug=true) my applications code : add manifast main....
Read more

gcc - MinGW's ld cannot perform PE operations on non PE output file -

i know there other similar questions out there, stackoverflow or not. i've researched lot this, , still didn't find single solution. i'm doing operative system side project. i've been doing in assembly, wanna join c code. test, made assembly code file (called test.asm): [bits 32] global _a section .text _a: jmp $ then made c file (called main.c): extern void a(void); int main(void) { a(); } to link, used file (called make.bat): "c:\mingw\bin\gcc.exe" -ffreestanding -c -o c.o main.c nasm -f coff -o asm.o test.asm "c:\mingw\bin\ld.exe" -ttext 0x100000 --oformat binary -o out.bin c.o asm.o pause i've been researching ages, , i'm still struggling find answer. hope won't flagged duplicate. acknowledge existence of similar questions, have different answers, , none work me. question: what doing wrong? old mingw versions had problem "ld" not able create non-pe files @ all. maybe current versions...
Read more

php - display validation error message next to the textbox in codeigniter -

Image
i'm newbie codeigniter.i want display error message next text box.my view file create.php contains following code. <?php echo validation_errors(); //validation echo form_open('news/create'); //create form ?> <div class="boxes"> <div class="common"> <div class="lables"> <label for="name">name</label> </div> <div class="text_boxes"> <input type="text" name="uname" /><div id="infomessage"><?php echo $message;?></br> </div> </div>` and below controller model: public function create() { $this->load->helper('form'); $this->load->library('form_validation'); $data['title'] = 'insert items'; $this->form_validation->set_rules('uname','required|min_length[6]|m...
Read more