jQyery bind on ajax load() event

Question

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!

Answer 1

tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox

call that in the callback of the ajax.

Answer 2

You have used the hideLoading function as the callback, instead replace it with this where you intialise the thickbox and also hide the loading.

content.load(targetURL, function(){ tb_init('a.thickbox'); hideLoading(); });