jQuery, содержимое AJAX теряет связь

Итак, представьте себе этот сценарий: у меня есть список, и в нем происходит небольшое разбиение на страницы, когда пользователь нажимает «Далее», ссылка перехватывается jQuery, он использует функцию $.ajax (которую я предоставил ниже), чтобы перейти и получить содержимое следующей страницы и отображать их в исходном контейнере. Это включает в себя ссылки на страницы, и мы хотим, чтобы они тоже обновлялись.

Первое изменение страницы работает нормально, но на этом этапе мы потеряли связь между нашим элементом ссылки и нашим правилом jQuery:

$('#paging a').click(function(event) {
    event.preventDefault();
    getElementContents('#target_container','',$(this).attr('href'),false);
    // arguements are (target element, data (for $ajax), url (for $ajax), highlight)
});

Какие варианты у меня есть для поддержания связи между событием и функцией?

Для справки, вот моя функция-оболочка для $.ajax:

var ajax_count = 0;
function getElementContents(target,data,url,highlight) {
    if(url==null) {
        url='/';
    }
    if(data==null) {
        var data=new Array();
    }
    if(highlight==null || highlight==true) {
        highlight=true;
    } else {
        highlight=false;
    }

    $.ajax({
        url: url,
        data: data,
        beforeSend: function() {
            /* if this is the first ajax call, block the screen */
            if(++ajax_count==1) {
                $.blockUI({message:'Loading data, please wait'});
            } 
        },
        success: function(responseText) {
            /* we want to perform different methods of assignment depending on the element type */
            if($(target).is("input")) {
                $(target).val(responseText);
            } else {
                $(target).html(responseText);
            }
            /* fire change, fire highlight effect... only id highlight==true */
            if(highlight==true) {
                $(target).trigger("change").effect("highlight",{},2000)
            }
        },
        complete: function () {
            /* if all ajax requests have completed, unblock screen */
            if(--ajax_count==0) {
                $.unblockUI();
            }
        },
        cache: false,
        dataType: "html"
    });
}

Спасибо! :-)

ИЗМЕНИТЬ

хммм, только что нашел этот вопрос... разбираюсь в этом :-)


binding jquery ajax
person Ben Everard    schedule 05.05.2010    source источник

Ответы (4)


arrow_upward
9
arrow_downward

попробуйте использовать jquery.live:

$('#paging a').live('click', function(event) {
    event.preventDefault();
    getElementContents('#target_container','',$(this).attr('href'),false);
    // arguements are (target element, data (for $ajax), url (for $ajax), highlight)
});

если вы используете jQuery 1.9 или выше, .live больше не существует, поэтому вместо этого вы можете использовать функцию .on:

$(document).on('click', '#paging a', function (event) {
        event.preventDefault();
        getElementContents('#target_container','',$(this).attr('href'),false);
});
person derek    schedule 05.05.2010
comment
Здоровья чувак! Нужно улучшить свои навыки поиска, это решение, которое я сейчас реализовал :-) - person Ben Everard; 05.05.2010
comment
Метод .live() уже был удален в версии jQuery 1.9, вместо него рекомендуется использовать метод .on()! - person Yann Chabot; 07.10.2013

arrow_upward
6
arrow_downward

Метод .live() уже был удален в 1.9 версии jQuery, вместо него рекомендуется использовать метод . на().

Но если у вас есть список элементов, и вы обертываете эти элементы именем его класса, например $(".view-page").on("click", function(){}); и вы загружаете еще один фрагмент элементов (например, страницу разбивки на страницы) того же класса, привязка будет потеряна.

Старый метод .live() разрешил эту проблему ("Присоединить обработчик событий для всех элементов, которые соответствуют текущему селектору, сейчас и в будущем."), но вы можете сделать то же самое, используя .on () в другой форме:

$(document).on("click", ".view-page", {}, function(event){
    // anything you want to do...
});

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

person p1nox    schedule 14.05.2013
comment
Это единственный пост, который заставил меня понять, почему я все еще терял свои привязки даже при использовании «вкл». Это сработало для меня - спасибо. - person Stefan; 27.02.2014

arrow_upward
2
arrow_downward

Ваши ссылки на страницы также заменяются через загрузку ajax? Если это так, то это новые элементы DOM, а исходные элементы пагинации (к которым были привязаны обработчики событий) больше не присутствуют. Если это так, проверьте метод jQuery .live() для привязки ваших обработчиков кликов.

person Harold1983-    schedule 05.05.2010
comment
Да, они заменены... спасибо за ответ, как и в случае с Дереком, все сработало отлично. - person Ben Everard; 05.05.2010

arrow_upward
0
arrow_downward

Вы можете повторно привязать событие в функции обратного вызова вызова AJAX.

 complete: function () {
        /* if all ajax requests have completed, unblock screen */
        if(--ajax_count==0) {
            $.unblockUI();


        }
        $('#paging a').click(function(event) {
            event.preventDefault();
            getElementContents('#target_container','',$(this).attr('href'),false);
               // arguements are (target element, data (for $ajax), url (for $ajax), highlight)
        });


    }
person Vincent Ramdhanie    schedule 05.05.2010
comment
Спасибо за ваш ответ, я предпочитаю использовать метод .live, так как у меня много элементов, которые вызывают эту функцию. :-) - person Ben Everard; 05.05.2010