Aplicar los widgets jQuery UI a elementos ajax cargado

Question

Quiero activar el aparato de botón jQueryUI en un selector dado, digamos '.button'.

Cuál es la mejor manera de activar automáticamente el widget en elementos de cualquier nuevo '.button' insertados al DOM después de la carga de la página inicial a través de AJAX.

Anteriormente, he utilizado la livePlugin con el código de algo como esto:

$('.button') 
    .live(function(){ 
     $(this).button(); 
    }) 

Desde 'en vivo' ha sido trasladado al núcleo de jQuery la función en vivo requiere un tipo de evento como el primer parámetro por lo que este ya no es posible. ¿Hay algún método alternativo dentro del núcleo de jQuery que logre esto?

Answer 1

usted tiene algunas opciones aquí. En primer lugar, está el liveQuery plugin, así:

$(.button).liveQuery(function() { $(this).button(); }); 

Otra alternativa es llamar al selector de sus elementos cuando usted los carga, esto por ejemplo busca todos .buttonúnica en la respuesta, por lo que no pierde el tiempo con elementos existentes antes de la llamada AJAX:

$.ajax({ 
    url: 'page.html' 
    success: function(data) { 
    //stuff... 
    $('.button', data).button(); 
    } 
}); 

Otro enfoque similar si usted tiene mucho que hacer es tener sus plugins en una función como esta:

function rigUI(context) { 
    $('.button', context).button(); 
    $('.date', context).datepicker(); 
} 

$(rigUI); // Load at document.ready, default context is document 

//in ajax load love above call: rigUI(data); 

Answer 2

Dado que todos los comandos de jQuery tienen una estructura uniforme que es muy fácil de usar cualquier objeto (incluyendo datos JSON de una petición Ajax) como un comando jQuery

muestra:

var jc = { 
    'selector': '#sample', 
    'method': 'dialog', 
    'options': {'title': 'I am a sample'} 
} 

$(jc.selector)[jc.method](jc.options); 

es la misma que

$ ('# muestra') de diálogo ({ 'título': "soy una muestra}.};

http://jsfiddle.net/wb5Ee/

Answer 3

Una alternativa a livequery como parecía antiguo a mí, ya que no podía hacer que funcione:

https://github.com/bapplistudio/jquery.build

• tiene que declarar todas sus activaciones jquery en * $ ("cuerpo"). build (función() {}); * declaraciones
• Es necesario llamar $ ("newElement") construcción (.); para volver a llamar a todas sus funciones de inicialización.

vistazo a la documentación en el sitio jquery.build para obtener más información y ejemplos, y la demostración en vivo similar a su caso.

http://saf.re/github/jquery.build/examples/simple.html