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({
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().