Question

This default code is working fine:

$('#headerLink').fancybox({
    'ajax' : {type  : "GET" }
});

But I want to use delegate:

$('#header').delegate('#headerLink', 'click', function(){
    $.fancybox({
        'ajax' : {type : 'GET'}
    });
});

It appears to load at first but instead of the content it just displays this message:
“The requested content cannot be loaded. Please try again later.”

Then it unloads, and just redirects to the url for the link.

I tried changing the syntax to $(this).fancybox({ ....

I also tried using ‘live’ but this doesn’t work either..

$('#headerLink').live('click', function(){
    $.fancybox({
       'ajax' : {type   : "GET" }
});

Any help with this really appreciated..

Answer 1

Just change your code to refer to a element inside your delegate:

$('#header').delegate('#headerLink', 'click', function(){
    $(this).fancybox({             // $(this) refers to the link
        'ajax' : {type : 'GET'}
    });
    return false;
});