CODEWITHSUNDEEP
jquery
Navdha Y
Navdha Y

Reputation: 3

Not able to run jQuery function( click ) more than once

Here's my code:

<script>
//scrpit for playing video on image click
$(document).ready(function() {
 $('.collage_img11 .tile-content p').click(function(){
 alert('test click event');
    video = '<div id="outerdiv"><a class="close_btn" style="cursor: pointer;">[X]</a><iframe height="385" width="505" src="'+ $('div.collage_img11').attr('data-video') +'" style="z-index: 2147483647; position: relative;"></iframe></div>';
    $('div#section_one').replaceWith(video);
  });


 //script for closing video player and display the content back 
  $(document).on('click', 'a.close_btn', function (e) {
alert('test close click event');
oldcontent = '<div id="section_one" style="clear:both;float:left"><div style="float:left"><div class="collage_img11" data-video="<?php echo get_field("image1_video_link"); ?>"><span class="tile-content"><p>&nbsp;</p><h5>click & play</h5></span></div></div></div>';
$('div#outerdiv').replaceWith(oldcontent); e.preventDefault(); }); });

Code is not that much formatted I know. But could format this much only.

This code runs perfectly for 2 click events.. ( 1st for opening the youtube player on clicking PLAY button & 2nd for closing player and replacing the old content).

Issue is that, after replacing the original content, I can't re-execute the click function for opening video player.

What can be the reason? Suggestions/help please.

Upvotes: 0

Views: 56

Answers (2)

madalinivascu
madalinivascu

Reputation: 32354

Use event delegation: 

$('body').on('click','.collage_img11 .tile-content p',function(){
 alert('test click event');
    video = '<div id="outerdiv"><a class="close_btn" style="cursor: pointer;">[X]</a><iframe height="385" width="505" src="'+ $('div.collage_img11').attr('data-video') +'" style="z-index: 2147483647; position: relative;"></iframe></div>';
    $('div#section_one').replaceWith(video);
  });

Upvotes: 0

Anoop Joshi P
Anoop Joshi P

Reputation: 25527

Since you are replacing the content, you need to use event delegation,

$(document).on("click",".collage_img11 .tile-content p",function(){

Normal event binding will work for the elements which are present on the dom at the time of vent binding. In your case, you are removing the old elements and add again it as new elements.

Upvotes: 1

Related Questions