Hello all. I am using PHP + jQuery + Fancybox in my project. I have multiple tabs that get created dynamically. I have got a star icon on every tab header and on clicking them I want to open a fancybox.

My tabs are basically ul-li with following dynamic code.

$("#tabs").append("<li class='current'><a class='tab' id='tab_" +
    tabCnt + "<a href='#loginBox_div' class='login_link'> <img src='star.png' style='cursor:pointer'/> </a>" + "<a href='javascript:void(0);' class='remove'>x</a></li>");

in my index file :

$(document).ready(function() {

        $("a.login_link").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });     

    });

The problem is that when I click on star icon of first tab, the loginBox_div (fancybox) opens properly. But when my second tab is created and when I click on its star icon, the fancybox is not opening although the class is applied in second and successive tabs. No javascript errors too. Please show me the way. Thank you.