Pulsante di chiamata ("aggiorna") su un pulsante jQuery mobile interrompe lo stile del pulsante

Question

Sto tentando di aggiornare dinamicamente il testo su un pulsante jQuery mobile. Il pulsante è in realtà un collegamento che ha lo stile di un pulsante.

Secondo lo jQuery mobile documentation, è necessario chiamare button("refresh") se si manipola il pulsante tramite javascript. Tuttavia, quando lo faccio, lo stile del pulsante diventa un po 'folle: si riduce a mezza altezza e il pulsante sembra schifoso.

Here's a JS Fiddle which demonstrates the problem.

Il codice è essenzialmente come segue:

$(function() { 
    // Buttonize 
    var $button = $("#myCrapButton"); 
    $button.button(); 

    // Change text on click 
    $button.click(function() { 
     $button.text("Awesome Button"); 
     $button.button("refresh"); 
    }); 
}); 

Cosa c'è di più, chiamando button("refresh") causa l'errore javascript: Cannot call method 'removeClass' of undefined.

so che posso risolvere questo problema manipolando il .ui-btn-textspan nidificato all'interno del pulsante; tuttavia, questo sembra l'approccio sbagliato in quanto richiede una conoscenza esplicita del funzionamento interno di jQuery Mobile.

Qualcuno può dirmi come far funzionare la chiamata di aggiornamento?

versioni utilizzando:

• jQuery 1.9.1
• jQuery Mobile 1.3.0 (in JSFiddle E '1.3.0 beta, ma la finale ha lo stesso comportamento).

Grazie!

Answer 1

EDIT:

dispiace leggere di digiunare e non ha visto che stavi cercando specificamente per la funzionalità di aggiornamento. Come hai notato, jQM non lo offre sui pulsanti del tag di ancoraggio.

Bene alternativa è solo per sostituire il pulsante con uno nuovo e lasciare jQm aggiungere il markup come prima

• http://jsfiddle.net/rfdQC/4/

JS

$(function() { 
    // Buttonize 
    var $button = $("#myCrapButton"); 
    var $clone = $button.clone(); 
    $button.button(); 

    // Change text on click 
    $button.click(function() { 
     $clone.text("Awesome Button"); 
     $clone.button(); 
     $button.replaceWith($clone); 
    }); 
}); 

Spero che questo aiuti!

originale:

Hai solo bisogno di visualizzare in dettaglio il markup aggiunto che jQm aggiunge.

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"> 
    <span class="ui-btn-inner"> 
     <span class="ui-btn-text"> 
      Click me! 
     </span> 
    </span> 
</a> 

stai cambiando il testo del pulsante:

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"> 
    Awesome Button 
</a> 

In questo modo si perde la marcatura aggiunto jQm ha bisogno per visualizzare il pulsante. È necessario modificare il testo di intervallo nidificato.

$(function() { 
    // Buttonize 
    var $button = $("#myCrapButton"); 
    $button.button(); 

    // Change text on click 
    $button.click(function() { 
     $button.children().children().text("Awesome Button"); 
    }); 
}); 

nessun aggiornamento necessario:

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c"> 
    <span class="ui-btn-inner"> 
     <span class="ui-btn-text"> 
      Awesome Button 
     </span> 
    </span> 
</a> 

Esempio dal vivo:

• http://jsfiddle.net/rfdQC/3/

Answer 2

Non importa; appena trovato questo nella parte superiore della documentazione:

Note: Links styled like buttons have all the same visual options as true form-based buttons below, but there are a few important differences. Link-based buttons aren't part of the button plugin and only just use the underlying buttonMarkup plugin to generate the button styles so the form button methods (enable, disable, refresh) aren't supported. If you need to disable a link-based button (or any element), it's possible to apply the disabled class ui-disabled yourself with JavaScript to achieve the same effect.

Anche se questo in realtà non risolvere il mio problema (di come aggiornare il testo del pulsante) - almeno risponde perché il "refresh" metodo non è supportato .

Edit:

Sono consapevole che posso direttamente aggiornamento del testo sul pulsante; Ho detto tanto nella domanda iniziale:

I know that I can work around this problem by manipulating the .ui-btn-text span that's nested inside the button; however, this seems like the wrong approach as it requires explicit knowledge of the internal workings of jquery Mobile.

speravo di evitare questa soluzione in qualche modo ottenere il metodo di "refresh" per lavorare. Tuttavia, sulla base del frammento di documentazione che ho trovato in seguito (e ho citato sopra), mi sono reso conto che l'utilizzo del metodo "refresh" non era un'opzione.

Dato che; Speravo ancora che ci fosse un altro modo per aggiornare il testo sul pulsante senza indirizzare esplicitamente gli elementi DOM generati (cioè utilizzando l'API jQM) - ma per quanto posso vedere, non esiste un metodo API per farlo. L'aggiornamento degli elementi DOM sembra l'unico modo per ottenere il risultato desiderato.

Entrambi i selettori forniti da @Phil Pafford ($(this).find('span span')) e @ OmarNew2PHP ($button.children().children()) sono (a mio parere) non corretti.Sì, funzionano perfettamente nell'esempio di cui sopra, tuttavia, se si aggiunge un'icona al pulsante:

<a id="myCrapButton" href="#" data-icon="delete">Click me!</a> 

Poi jQm aggiunge un ulteriore span per visualizzare l'icona (attributi tag anchor tagliati per brevità):

<a href="#"> 
    <span class="ui-btn-inner"> 
     <span class="ui-btn-text">Delete</span> 
     <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span> 
    </span> 
</a> 

Utilizzando i selettori sopra aggiungerà il testo sia degli interni span tag. Questo è un altro esempio del perché speravo di evitare di aggiornare direttamente il DOM - perché non puoi (e non dovresti) prevedere quale jQM sta per generare.

Ma, alla fine della giornata, sembra che il modo migliore per aggiornare il testo all'interno del pulsante sta usando il metodo speravo di evitare:

$button.click(function() { 
    $(".ui-btn-text", this).text("Awesome Button"); 
}); 

Grazie per le vostre risposte.

Answer 3

ho passato ore su questo e, infine, questo ha funzionato per me. Tipo di soluzione pulita. Quindi, se si dispone di un javascript che sta creando seguente codice HTML all'interno di un elemento

<div id="buttonParent"> 
    <a href='#' id="1_button" data-role="button">Click me</a> 
    <a href='#' id="2_button" data-role="button">Another Click me</a> 
</div> 

quindi chiamando sotto rinfrescherà i pulsanti.

jQuery('#buttonParent').trigger('create'); 

Si prega di notare che sotto non funzionava e faceva eccezioni.

jQuery('#1_button').button('refresh') 

Può aiutare qualcun altro come me. Era una perdita di tempo. jqm ha bisogno di risolvere questo bug. Avevo un wrapper attorno a questi pulsanti per un collasso e l'aggiornamento funzionava bene ma questo aggiornamento sul pulsante continuava a generare errori. E 'stato molto fastidioso