jQyery bind on ajax load() event

Posted by Andrei C on Stack Overflow See other posts from Stack Overflow or by Andrei C
Published on 2009-11-13T13:56:25Z Indexed on 2010/04/15 21:03 UTC
Read the original article Hit count: 371

Filed under:
|
|
|
|

Hi guys.

I have a page which display multiple blocks with results details. Inside each block I have some tags with thichbox jQuery plugin attached( class="thichbox"). http://jquery.com/demo/thickbox/

here is an example of one kind of ampersant tag:

<a class="thickbox" title="Please Sign In" href="userloginredir.php?height=220&width=350&deal=3">

Problem comes when I added a jQuery pagination to the page because of to many results displaying on the page. The div component with the results inside is updated through ajax load() event. Below is the pagination script.

$(document).ready(function(){
//References
var pages = $("#menu_deals li");
var loading = $("#loading_deals");
var content = $("#content_deals");

//show loading bar
function showLoading(){
	loading
		.css({visibility:"visible"})
		.css({opacity:"1"})
		.css({display:"block"})
	;
}
//hide loading bar
function hideLoading(){
	loading.fadeTo(1000, 0);
};


//Manage click events
pages.live('click',function(){
	//show the loading bar
	showLoading();

	//Highlight current page number
	pages.css({'background-color' : ''});
	$(this).css({'background-color' : 'yellow'});

	//Load content
	var pageNum = this.id;
	var targetUrl = "ajax_search_results.php?page=" + pageNum + "&" + $("#dealsForm").serialize() + " #content_d";
	content.load(targetUrl, hideLoading);
});

//default - 1st page
$("#1").css({'background-color' : 'yellow'});
var targetUrl = "ajax_search_results.php?page=1&" + $("#dealsForm").serialize() + " #content_d";
showLoading();
content.load(targetUrl, hideLoading);

});

When I added pagination(code above), the thickbox events are not recognized anymore and instead of poping out a window with the login form inside it opens the results in new page (is acting like clicking on a normal link) From my jQuery knowledge this means that the components are not defined in the DOM because the content is updated after document ready triggered.

I'm trying to bind the load event with something like this:

content.bind('load',???);

But I don't know how to pass the load params, targetUrl and the callback function hideLoading, when binding the load event.

Please help me out in this matter, already took me more time than possible allowed.

Thank you!

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about bind