Databases
StackOverflow2013
Postsdbo
PO.bind/.unbind event after initial prettyphoto.open funcation is run
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO.bind/.unbind event after initial prettyphoto.open funcation is run
    text
    copied!<p>I am using .appened to add some HTML to a div in markup that is being outputted when prettyphoto light-box clone opens.</p> <p>I am trying to figure out how to only load the appended HTML to the light-box once and not every time the a new image in the gallery is viewed by using the back/next button.</p> <p>From what I have found this would be done by using .bind/.unbind but writing this function does not seem to work. </p> <p>I am using the following even handler inside the prettyphoto open function</p> <pre><code>$.prettyPhoto.open=function(event){ $(".pbdog-gAd").append('&lt;p style="text-align: center;"&gt;&lt;a href="' + prettyLink + '" target="_blank"&gt;&lt;img src="' + prettyAd + '" width="468" height="60" alt="" /&gt;&lt;/a&gt;&lt;/p&gt;'); </code></pre> <p>Which results in the desired output...</p> <p><img src="https://i.stack.imgur.com/afYRq.png" alt=""></p> <p>My problem is that each time the next/previous buttons are clicked it runs the script again and adds an additional ad image below the current one, as seen below. It keeps doing this until prettyphoto eventually crashes</p> <p><img src="https://i.stack.imgur.com/mtKJF.png" alt=""></p> <p>From what I can understand I need to write a function that will call this event the first time but not each time the next/previous button is clicked</p> <p>I have tried the following with no luck</p> <pre><code>$(".pbdog-gAd").bind("click", function( event ) { $(".pbdog-gAd").append('&lt;p style="text-align: center;"&gt;&lt;a href="' + prettyLink + '" target="_blank"&gt;&lt;img src="' + prettyAd + '" width="468" height="60" alt="" /&gt;&lt;/a&gt;&lt;/p&gt;'); $(this).unbind( event ); }); </code></pre> <p>Doing the above seems to make prettyphoto ignore this function all together. Doing the below seems to break prettyphoto</p> <pre><code>$.prettyPhoto.bind("click", function( event ) { $(".pbdog-gAd").append('&lt;p style="text-align: center;"&gt;&lt;a href="' + prettyLink + '" target="_blank"&gt;&lt;img src="' + prettyAd + '" width="468" height="60" alt="" /&gt;&lt;/a&gt;&lt;/p&gt;'); $(this).unbind( event ); }); </code></pre> <p>I obviously don't understand what I am doing here so any help would be greatly appreciated.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload