Come ri-rendering i tag di ancoraggio generati dinamicamente in jquery Mobile?

Question

Ricevo un snippet html del tag di ancoraggio dal server su una chiamata ajax. Come faccio ad "aggiornare" in modo che jquery mobile possa aggiungere le classi necessarie ai collegamenti?

Ad esempio, il link che mobili jquery genera ha un ui-link:

<a class="ui-link" href="http://www.google.com">http://www.google.com</a> 

Come faccio a garantire che gli stili corretti sono aggiunti su un tag di ancoraggio appena generata?

Answer 1

Qui è almeno un modo per aggiornare lo stile per i pulsanti jQuery Mobile:

$(yourButtons).button('refresh'); 

Documentazione: http://jquerymobile.com/test/docs/buttons/buttons-types.html

Answer 2

Se si desidera aggiornare un widget che è già stato inizializzato, allora è possibile aggiornare ogni tipo di widget di usarlo di rispettiva funzione:

$('.ui-btn').button('refresh'); 

Avviso ho usato la classe .ui-btn per selezionare il calcio sugli elementi, questa classe viene aggiunta una volta che il pulsante è inizializzato, quindi puoi essere sicuro che stai aggiornando un widget pulsante già inizializzato.

Documenti: http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-methods.html

Se è necessario inizializzare un widget che deve ancora essere inizializzato, poi basta omettere il 'refresh' o utilizzare .trigger('create'): Avviso

$('[data-role="button"], button, input[type="button"], input[type="submit"]').not('.ui-btn').button();//or .trigger('create'); 

qui tralascio i widget già inizializzati usando .not('.ui-btn') quindi questo inizializzerà solo i widget non inizializzati. Se si tenta di inizializzare un widget che è già stato inizializzato, si ottiene un errore (lo stesso se si tenta di aggiornare un widget che non è ancora stato inizializzato).

Aggiornamento

Se il vostro HTML è in fase di uscita dal server, allora è possibile inizializzare i widget prima di aggiungerli al DOM:

$.ajax({ 
    ... 
    success : function (serverResponse) { 
     var $out = $(serverResponse); 
     //if there is a container with elements inside it, use `.find()`, 
     //if all the elements are siblings at the top level then use `.filter()` 
     $out.find('a').button(); 
     $('body').append($out); 
    } 
}); 

È anche possibile utilizzare la funzione .buttonMarkup() per aggiornare i widget dei pulsanti: http://jquerymobile.com/demos/1.1.0-rc.1/docs/buttons/buttons-options.html