2010-03-04 21 views
7

Actualmente estoy usando John Resig's LiveQuery plugin/function para permitir a los usuarios ordenar a través de una larga lista desordenada de elementos de lista. El código es el siguiente: $('input#q').liveUpdate('ul#teams').focus(); El problema surge cuando uso una pestaña jaxificada para ordenar las listas. Básicamente utilizo ajax para extraer listas diferentes y la función liveUpdate() no tiene acceso a las nuevas li's.Cómo usar jQuery .live() con ajax

Supongo que tendré que vincular esto usando el .live() function. Pero no tengo claro cómo vincular esto con un evento de Ajax, solo he usado el evento "clic". ¿Cómo vincularía el nuevo liveUpdate() a los elementos de lista recién cargados?

EDIT: Las pestañas ajax se ejecuta a través de la API de WordPress ajax lo que el código es bastante complejo, pero simplifican es algo como esto:

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

Esto se simplifica por el bien de esta conversación , pero básicamente una vez que el $.post carga la respuesta en su lugar .liveUpdate() no tiene acceso. Creo que la función .live() es la respuesta a este problema, estoy claro sobre la forma de ponerla en práctica con el $.post()

+1

¿Puede usted por favor, puesto código que está utilizando para sus “pestañas Ajaxified”? – matdumsa

+0

He editado la publicación original con ajax-tabs js – kylemac

Respuesta

0
$('input#q').live(function() { 
    $(this).liveUpdate('ul#teams').focus(); 
}); 
0
$("div.item-list-tabs").live("click",function(){ 
//statements.. 
}); 
1

Trate de usar jQuery's Ajax Events

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

    $(this).unbind('ajaxStop'); 
}); 
4

Como lo mencionan en la documentación de JQuery, .live() se considera obsoleto. Deberías usar el método .on() en su lugar.

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

Para administrar también objeto futur del tipo de selección, puede utilizar .on() como esto

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

También me dio problemas con el uso de solo

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

después de un Ajax llame y finalmente descubra que necesitamos usar

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

o el nuevo método

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

para unirse al evento para los nuevos elementos creados después de una llamada Ajax.

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

Por vivo

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