jQuery bind on ajax load() event

Question

I have a page which displays multiple blocks with results details. Inside each block I have some <a> tags with thickbox jQuery plugin attached: class="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 too 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, it already took me more time than possible allowed.

Answer 1

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

在ajax的回调中调用它。

Answer 2

您已经使用了hideLoading函数作为回调，而用它代替了它，您在其中初始化了thickbox并隐藏了加载。

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