Bug with jquery .on and facebox

Question

I have an element that loads from AJAX. With tthat element, I attached Facebox.js. When the element is clicked, it will triggered Facebox. So I used:

$(document).on("click", "a[rel*=modal]", function() {
    $(this).facebox(); // Applies modal window to any link with attribute rel="modal"
});

The thing is, it requires the element to be clicked twice before Facebox is triggered. So as a quick fix, I added:

$('a[rel*=modal]').trigger('click');

This way, I can click the element only once to trigger. Is there a better way to fix ?

Answer 1

The problem is when the first click happens the facebox plugin is not initialized, a workaround is to initialize the plugin and then re-trigger the click event again

$(document).one("click", "a[rel*=modal]", function() {
    $(this).facebox().triggerHandler('click');
});