Bezdepbonusu7Программирование: статьи и ответы
Меню

Вопрос

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

Автор вопроса: Ben EverardОтветов: 4

Итак, представьте себе этот сценарий: у меня есть список, и в нем происходит небольшое разбиение на страницы, когда пользователь нажимает "Далее", ссылка перехватывается 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"
    });
}

Спасибо! :-)

ИЗМЕНИТЬ

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

bindingjqueryajax

Ответы

Ответ 1 · рейтинг 9 · derek

попробуйте использовать 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);
});

Ответ 2 · рейтинг 6 · p1nox

Метод .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 в любое время, будет иметь такое поведение.

Ответ 3 · рейтинг 2 · Harold1983-

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

Ответ 4 · Vincent Ramdhanie

Вы можете повторно привязать событие в функции обратного вызова вызова 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)
        });


    }

Перевод вопроса и ответов сообщества Stack Overflow, лицензия CC BY-SA. Оригинал на Stack Overflow.

Похожие материалы