How to use jQuery.live () with ajax

Question

I am currently using the John Resig LiveQuery plugin / function to allow users to sort a long unordered list of list items. The code is as follows: $('input#q').liveUpdate('ul#teams').focus(); The problem occurs when I use ajaxified tabs to sort lists. Essentially, I use ajax to liveUpdate() on different lists, and the liveUpdate() function does not have access to the new li.

I assume I need to bind this using the .live() function . But I don’t understand how to associate this with the ajax event, I used the "click" event. How to associate new liveUpdate() with recently loaded list items?

EDIT: Ajax tabs run through wordpress ajax api, so the code is pretty complicated, but simplified, it looks something like this:

 $('div.item-list-tabs').click( function(event) { var target = $(event.target).parent(); var data = {action, scope, pagination}; // Passes action to WP that loads my tab data $.post( ajaxurl, data, function(response) { $(target).fadeOut( 100, function() { $(this).html(response); $(this).fadeIn(100); }); }); return false; }); 

This is simplified for the sake of this conversation, but basically after $.post loads the response in place, .liveUpdate() does not have access to it. I believe the .live() function is the answer to this problem, I just don’t understand how to implement it with $.post()

Answer 1

As mentioned in the jQuery documentation, .live () is deprecated. Instead, you should use the .on () method.

 $("#yourSelector").on("click", function() { // statement }); 

To also control a futur object of type selector, you can use .on () like this

 $(document).on("click", "#yourSelector", function() { // statement }); 

Answer 2

Try using jQuery Ajax Events

 $('input#q').ajaxComplete(function(){ $(this).liveUpdate('ul#teams').focus(); $(this).unbind('ajaxStop'); }); 

Answer 3

I also had a problem using only

 $('selector').click(function(.. 

after calling Ajax and finally discovered that we need to use

 $('selector').live("click", function(){.. 

or new method

 $(document).on('click', 'selector', function(){.. 

to bind an event for new items created after an Ajax call.

 $(document).on('click','selector', function(event){ //your code }); 

For living

 $('selector').live('click', function(event){ //your code }); 

Answer 4

 $('input#q').live(function() { $(this).liveUpdate('ul#teams').focus(); }); 

Answer 5

 $("div.item-list-tabs").live("click",function(){ //statements.. });