Question

I have two links to open a fancy box.

One is on the page when the page loads.
The other I inject onto the page with Ajax after performing some action.

Both links are identical.
The one that is on the page when the page loads opens the fancybox when it is clicked.

The one that is injected with Ajax does not.

Here is the jquery script for the fancybox in the application.js file.

$(document).ready(function() {
    $("a.iframe`").fancybox({
        'hideOnContentClick': true,
        'hideOnOverlayClick': true,
        'padding'           :   0 ,
            'width'         :   600 ,
            'height'        :   500,
            'transitionIn'  :   'elastic',
            'transitionOut' :   'elastic',
            'speedIn'       :   200, 
            'speedOut'      :   200,
    });
});

Here is the link that opens the fancybox and is on the page at page load:

<a class="iframe" href="/icons?id=5&upload_for=Greeting">change</a>

Here is the link that does not work to open the fancy box that I put on the page using ajax:

<a class="iframe" href="/icons?id=30&upload_for=Greeting">change</a>

Why does one link work and not the other

Answer 1

When you call $('a.iframe').fancybox(...), it only applies to the elements already on the page and won’t automatically apply to future elements via ajax.

If you’re using something like a .js.erb file to insert the link dynamically, you could add another call to .fancybox(...) in there.

Or, you could use something like the Live Query plugin. This will let you do something like this, and it will automatically apply to all future items:

$('a.iframe').livequery(function(){ 
  $(this).fancybox({
    'hideOnContentClick': true,
    'hideOnOverlayClick': true,
    'padding'           :   0 ,
        'width'         :   600 ,
        'height'        :   500,
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   200, 
        'speedOut'      :   200,
  }); 
});