Привязка jQuery к событию ajax load () - PullRequest
Новая
       27

Привязка jQuery к событию ajax load ()

1 голос
/ 13 ноября 2009

У меня есть страница, которая отображает несколько блоков с подробной информацией о результатах. Внутри каждого блока у меня есть <a> теги с подключенным плагином jQuery для boxbox: class = "Thickbox"

Вот пример амперсантного тега одного типа: 

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

Проблема возникает, когда я добавил пагинацию jQuery на страницу из-за слишком большого количества результатов, отображаемых на странице. Компонент div с результатами внутри обновляется с помощью события ajax load ().

Ниже приведен скрипт нумерации страниц: 

$(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);
});

Когда я добавил пагинацию (код выше), события Thickbox больше не распознаются, и вместо того, чтобы выскочить окно с формой входа в систему, он открывает результаты на новой странице (действует как нажатие на обычную ссылку) Насколько мне известно из jQuery, это означает, что компоненты не определены в DOM, потому что содержимое обновляется после запуска готового документа.

Я пытаюсь связать событие загрузки с чем-то вроде этого: 

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

Но я не знаю, как передать параметры загрузки, targetUrl и функцию обратного вызова hideLoading при привязке события загрузки.

Пожалуйста, помогите мне в этом вопросе, это заняло у меня больше времени, чем возможно.

Ответы [ 2 ]

0 голосов
/ 14 ноября 2009

Вы использовали функцию hideLoading в качестве обратного вызова, вместо этого замените ее на эту, где вы инициализируете Thickbox и также скрываете загрузку. 

content.load(targetURL, function(){ tb_init('a.thickbox'); hideLoading(); });
0 голосов
/ 13 ноября 2009 
tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox

вызовите это в обратном вызове ajax.

...