After pullingout my hairs for last 2hours, still I could not find out the conflict. Please help me in troubleshooting this issue. I am using http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment3.htm to create ajax tabs for my sites and also using http://defunkt.io/facebox/ for modal windows. But when I am trying facebox links loaded through the ajax tabs, then its not loading the contents into facebox. But its working fine for any links outside the ajax tabs. Any idea?
This is simply due to the fact that any new content that you load into the DOM will not have any previously set event handlers attached to them.
So in this case your facebox plugin is being initialised prior to the new content being loaded in the ajax tabs. Therefore, essentially the facebox plugin does not know that these new links exists.
The answer is to reinitialise the plugin after the new content has been loaded.
So you need to call:-
$('a[rel*=facebox]').facebox()
...again, once the new ajax tabs content has been loaded into the DOM. From a very brief look over the ajax tabs script I would imagine you could solve this easily by simple reinitialising the facebox plugin (as shown above) by adding that line into a function that gets called everytime any new content is loaded into an ajax tab.
Alternatively (and far more simply) you could initialise the facebox plugin using the jQuery livequery plugin
Using this code (once you have included the livequery script on your site:-
$('a[rel*=facebox]').livequery(function() {
$(this).facebox();
});
Livequery will then automatically detect the newly loaded facebox links when they are added to the DOM and apply the facebox plugin to them for you.
EDIT:
If this still isn't having the desired effect (though I really can't see why not as live query when I used to use it was a dream) try this dirty little hack to unbind and rebind facebox every time you mouse down. On ANY facebox link new or old.
$('a[rel*=facebox]').live("mousedown", function() {
$(this).unbind('click'); //everytime you click unbind the past event handled.
$(this).facebox();
});