Applying jQuery to AJAX'd Content

JavaScript
1

I’m having some problems and wanted to see if anyone knew how to resolve my issues. I’m using fancybox to call another page. Everything returns fine except i need the tinyscrollbar to apply to the content returned in ajax so that the user can scroll to view the complete content. I’ve tried using .on but not sure if i’m doing it right. i’ve used the following codes:

$(document).ready( function()
{
	$("a.lightbox").fancybox({
		'titlePosition'		: 'inside',
		'transitionIn'		: 'none',
		'transitionOut'		: 'none'
	});

	$("a.lightbox").on( 'load', function() {
		$('#scrollable').tinyscrollbar();
	});

});

and

$(document).on("click", "a.lightbox", function() {
	alert( 'hello' );
	$('#scrollable').tinyscrollbar();
});

Neither work. If i add an alert then it seems to work:

$(document).ready( function()
{
	$("a.lightbox").fancybox({
		'titlePosition'		: 'inside',
		'transitionIn'		: 'none',
		'transitionOut'		: 'none'
	});

	$("a.lightbox").on( 'load', function() {
		alert( "hello world" );
		$('#scrollable').tinyscrollbar();
	});

});

Any one know how to get jquery to apply to the ajax’d content?

2

As far as I know the ‘load’ won’t work but correct me if I’m wrong, your functions would work if you remove the load and add ‘click’ check [http://jsfiddle.net/g7M3s/]this ](http://jsfiddle.net/g7M3s/) as it is a sample of the anchor being selected by it’s class name, if you click the anchor you will get the alert

3

Yea it didn’t. I did finally get it to work using fancybox’s onComplete. Now that fixed what i needed to do.

$(document).ready( function()
{
    $("a.lightbox").fancybox({
        'titlePosition'        : 'inside',
        'transitionIn'        : 'none',
        'transitionOut'        : 'none',
        'onComplete'        : function() {
            $('#scrollable').tinyscrollbar();
        }
    });
});