Question

So imagine this scenario, I have a list and it has a bit of pagination going on, when the user clicks next, the link is hijacked by jQuery, it uses the $.ajax function (of which I’ve provided below) to go and get the next page contents and display them in the original container. This includes the pagination links as well as we want them to update too.

The first page change works fine, but at this stage we’ve lost the bind between our link element and our jQuery rule:

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

What options do I have to maintain the bind between the event and the function?

For reference, here is my wrapper function for $.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"
    });
}

Thanks! 🙂

EDIT

hmmm, just found this question… looking into it 🙂

Answer 1

try using 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)
});

if using jQuery 1.9 or above, .live no longer exists so you can use the .on function instead:

$(document).on('click', '#paging a', function (event) {
        event.preventDefault();
        getElementContents('#target_container','',$(this).attr('href'),false);
});