Facebox Fails When Loaded via AJAX

Question

I have a very simple HTML page at http://bit.ly/1eaSnKt

The first line is a functioning Facebox link. Note that, when clicked, it opens the FaceBox popup perfectly.

The second line is a similar link, but exists on a different HTML page which is pulled via AJAX (see source). For some reason, when clicked, it fails to open the FaceBox popup. Does anyone have a clue why this is failing? Thanks.

Answer 1

When your page loads, on Document ready, you are attaching the behaviors to the items in the page.

With the Ajax load, it loads the items after the document is ready, and there jQuery has attached the behaviors... missing your new content.

You need to attach those behaviors after the ajax is successful. So after the ajax load, use a callback, or a closure to do this

$('a[rel*=facebox]').facebox({
    loading_image : 'facebox/loading.gif',
    close_image   : 'facebox/closelabel.gif'
})

Hope that makes sense.

Answer 2

Thanks all. I actually found the solution here - https://github.com/dator/facebox/commit/5ce6a75927d81b9fff1eeff9b933f0ad93f12801