JQuery, AJAXed контент теряет связь

Question

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

Спасибо! : -)

EDIT

хммм, только что нашел этот вопрос ... заглядывая в него: -)

Answer 1

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

Answer 2

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

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

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

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

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

Answer 3

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

Answer 4

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


    }