How to use jQuery .live() with ajax

Posted by kylemac on Stack Overflow See other posts from Stack Overflow or by kylemac
Published on 2010-03-04T03:12:09Z Indexed on 2010/05/11 3:04 UTC
Read the original article Hit count: 320

Filed under:
|
|
|

Currently I am using John Resig's LiveQuery plugin/function - http://ejohn.org/blog/jquery-livesearch/ - to allow users to sort through a long unordered-list of list-items. The code is as follows: $('input#q').liveUpdate('ul#teams').focus(); The issue arises when I use ajaxified tabs to sort the lists. Essentially I use ajax to pull in different lists and the liveUpdate() function doesn't have access to the new li's.

I assume I would need to bind this using the .live() function - http://api.jquery.com/live/. But I am unclear how to bind this to an ajax event, I've only used the "click" event. How would I bind the new liveUpdate() to the newly loaded list-items?

EDIT: The ajax tabs is run through the wordpress ajax api so the code is fairly complex, but simplified it is 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 once the $.post loads the response in place .liveUpdate() doesn't have access to it. I believe the .live() function is the answer to this problem, I'm just unclear on how to implement it with the $.post()

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about AJAX