Jquery Fancy Box loading issue AJAX response

Question

As of my below code, it does not load the fancy box after the AJAX response when clicking the link.

Id of the <a> tag is generated dynamically.

But when i click the same link in the second time it loads but AJAX function also is getting recalled.

$(document).ready(function()
{

   $(".cont").live('click',function(e)
    {
        //Cancel the default action (navigation) of the click.
        e.preventDefault();

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


        $('#apps').load('/app/get-app-details', function(){
            $("#"+contentId).fancybox();
        });

    });


  });

<a class="cont" href="#device_detection" id="apps_<?= $regUsers->id; ?>"> Click to view apps</a>

Please provide me a solution.

Is this need to be down voted. It may have the duplicated Subject. But the content is different. I already checked the questions similar to this and those are not my question. — Shaolin, Oct 03 '12 at 13:20
Fancybox v1.3.4 doesn't support dynamically added elements. Check http://stackoverflow.com/a/9084293/1055987 for a workaround. — JFK, Oct 04 '12 at 06:42

score 0 · Answer 1 · answered Apr 21 '14 at 10:19

This is working.May be some one else have useful

  $(".cont").live("click",function() {

      link=($(this).attr('href'));



            $.fancybox({
            'width'                : '1000',
            'href'                 : link,
            'height'            : '750',
            'autoScale'         : false,
            'transitionIn'        : 'none',
            'transitionOut'        : 'none',
            'type'                : 'iframe'
            }); 





      return false; // don't follow the link!
           });

Live is deprecated with latest jquery .so you can use

$("body").on("click",".cont",function() {

      link=($(this).attr('href'));



            $.fancybox({
            'width'                : '1000',
            'href'                 : link,
            'height'            : '750',
            'autoScale'         : false,
            'transitionIn'        : 'none',
            'transitionOut'        : 'none',
            'type'                : 'iframe'
            }); 





      event.preventDefault(); // don't follow the link!
           });

Jquery Fancy Box loading issue AJAX response

1 Answers1