jQuery, AJAXed content losing it's bind

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

Answer 2

Are your pagination links also being replaced via the ajax load? If so, they are new DOM elements, and the original pagination elements (which had the event handlers bound) are no longer present. If this is the case, check out jQuery's .live() method to bind your click handlers.

Answer 3

You can re-bind the event in the callback function of the AJAX call.

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


    }