CODEWITHSUNDEEP
javascriptjqueryhtmlonclickfancybox
Elliot
Elliot

Reputation: 3

Fancybox inside a div, Does not work after onclick event

Hello everyone and thank you very much for your time. Basically what I am developing is a long list of videos on a webpage. I had a div tag that includes lets say 10 video links. These links open an iframe html that has the actual video embedded there. So parent page has no videos, just links, the anchors have href="video.html", video.html has video in it. Everything loads fine initially, but afterwards I also need a sort function. I made my sort function which sorts the videos. Onclick the videos change. The way this works it that the content inside the div is changed using .innerHTML = "". The content does change, and I am able to see the new video links and preview images, however when I click on the images, the href link opens in a new window, or parent window, not sure, but not important because the Fancybox does not open, I tried a number of different things but still not results. So the question I am asking is why does Fancybox not work when anchor tags are changed dynamically. Please Help

Okay thank you, I am not sure exactly how to use .live and .bind but i will look into it. For now, here is my code 

<div id="mask">
</div>
<script type="text/javascript" language="javascript">
populate();
function populate()
{
var mask=document.getElementById('mask');
mask.innerHTML = '';
mask.innerHTML = allvideos[3] + allvideos[0];
}
//Then allvideos[3] for example would be like <a href="videos.html"/>
//So up to this part everything works. But now if i try and do
</script>
<div onclick="change();" >doesntmatter</div>
<script>
//And the change function
function change() {
var mask=document.getElementById('mask');
mask.innerHTML = '';
mask.innerHTML = allvideos[3] + allvideos[0];
} 
</script>

So basically same exact function but fancybox stops working. And right now the Fancybox code gets called in the beginning like this:

$(document).ready(function() { $("a.videos").fancybox({

===== SOLVED =====

I had to change 

$(document).ready(function() {$("a.videos").fancybox({

to 

$(document).ready(function() {
_$('a.video').live('mouseenter', function(){_
$(this).fancybox({

Upvotes: 0

Views: 2258

Answers (2)

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18344

Right after you changed your elements with javascript (for example, when you did .innerHTML = "") you have to call your initial code again, including the call to your fancybox plugin,

You could also try to use .live() instead of .bind().

Upvotes: 0

Kanishka Panamaldeniya
Kanishka Panamaldeniya

Reputation: 17576

use live()

example

instead of $('#id').click(function(){});use 

$('#id').live('click',function(){});

live will apply to dynamically added objects

Upvotes: 1

Related Questions