JQuery, AJAXed content losing it

Question

So imagine this scenario, I have a list, and it has a little pagination, when the user clicks on, the link gets carried away by jQuery, it uses the $.ajax function (from which I quoted below) to go to the next page content and display them in the source container. This includes links to pages, and we also want them to be updated as well.

The first page change works fine, but at this point we have lost the connection 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 parameters do I have to maintain communication 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 at 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 you use jQuery 1.9 or higher, .live no longer exists, so you can use the .on function:

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

Answer 2

The .live () method has already been removed on 1.9 vertion jQuery, instead they recommend using the .on () method.

But if you have a list of elements and you wrap these elements with your class name, for example $ (". View-page"). (("click", function () {}); and you load another fragment of elements (for example, a pagination page) of the same class, the binding will be lost.

The old .live () method solved this ("Attach an event handler for all elements that match the current selector, now and in the future"), but you can do the same using .on () in another form:

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

This will not lose the binding, even if the fragment of the elements changes in your fragmentation area, because your jQuery message that everything that is in the DOM at any time will have this behavior.

Answer 3

Are your page links also replaced with ajax load? If so, they are new DOM elements, and the original pagination elements (which are associated with event handlers) are no longer present. If so, check out jQuery.live ()'s way to bind click handlers.

Answer 4

You can relink the event in the AJAX callback function.

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