0

I need to load jquery fancy box when dynamically generated tag is clicked. When I click the link in the first time, fancy box does not appear, when it's clicked in the 2nd time it loads.

Can you give me a solution ? here is my code,

$(document).ready(function()
    {   
        $(".app a").live('click',function(e){

        e.preventDefault();
        var contentId = $(this).attr('id');

            $("#"+contentId).fancybox({            
                'titleShow'     : false,
                'padding'       : 0,
                'transitionIn'  : 'elastic',
                'transitionOut' : 'elastic',
                'autoDimensions':false, 
                'width'     :380, 
                'height'        :500,
                'showCloseButton' : true,
                'hideOnOverlayClick' : false            
            });

        });
    });


<div class="app"> 
  <a href="#device_detection" id="apps_<?= $regUsers->id; ?>"> click here</a>
</div>
PiTheNumber
  • 22,828
  • 17
  • 107
  • 180
Shaolin
  • 2,541
  • 4
  • 30
  • 41
  • This code all looks fine, perhaps there is a problem with the order of your Javascript includes - can you post the rest of your html?, or put the code into a jsFiddle to illustrate the problem? – tonycoupland Oct 02 '12 at 12:27
  • So many Jquery components have been included such as jquery.tinymce.js, jquery.flot.js, query.validate.js therefore it's difficult to put the entire code. But It works when the id of the anchor tag is static. – Shaolin Oct 02 '12 at 12:43
  • Is the click event triggered the first time you click? Use `console.log('yes');` to find out. If not => has nothing to do with fancybox. – PiTheNumber Oct 02 '12 at 12:45

1 Answers1

2

Following this post
On the first click you're just initializing fancybox, you need to fire the event listener of fancybox by doing this

$("#"+contentId).fancybox({            
    'titleShow'     : false,
    ...
}).trigger("click");
Community
  • 1
  • 1
Touki
  • 7,465
  • 3
  • 41
  • 63