Shadowbox doesn't works when it's placed inside of a jQuery ".html" function.

Question

Well, I'm placing a link inside of a div called "alerta" with jQuery function ".html".

Ok, then I tried to place the "rel='shadowbox'" parameter inside of my "a" tag and it doesn't works.

$('#alerta').html('<a href="selecao.php?id=' + 
                    avisos[i+1] + '" rel="shadowbox">' + avisos[i] + '</a>');

If the link is placed directly on the page, it works fine...

Thanks.

Answer 1

Have a look at the following SO post. It may help.

http://stackoverflow.com/questions/2518745/jquery-shadowbox-rebinding

Answer 2

Shadowbox initialises the elements that have a rel of shadowbox on page load. If you use jquery to add a link then the link won't have an event handler attached to it.

Try adding a class to the link, such as sbox. Then put this in your script tags instead of Shadowbox.init();

window.onload = function() {
   Shadowbox.setup($('.sbox'));
};

Shadowbox.init({
     skipSetup:true, // skip the automatic setup    
});

$(document).ready(function(){

       $('a.sbox').live('click',function(event){

       Shadowbox.open(this);
       //Stops loading link
       event.preventDefault();

       });
});

Answer 3

I suppose you need to call the

Shadowbox.init();

or somethink similar to make shadowbox aware of the newly added links.

UPDATE see the answer form Lance May. Mine is obsolete.

Answer 4

I Solved the problem. You have to initialize (shadowbox.ini()) just when all the "shadowbox links" are placed.

Thank you for the support.