errore jquery mobile - impossibile chiamare i metodi sul pulsante prima dell'inizializzazione; tentativo di chiamare il metodo 'disabled'

Question

Secondo la documentazione (http://jquerymobile.com/demos/1.2.0/docs/api/events.html), l'evento pageinit dovrebbe essere chiamato dopo che tutti i widget e i plugin per una pagina mobile jQuery sono stati eseguiti. Quindi, credo che dovrei essere in grado di interagire con gli elementi di quella pagina con impunità nel callback dell'evento. Tuttavia, io ascolto per la pagina per inizializzare e quindi provare a interagire con un pulsante sulla pagina, e ottengo il seguente errore:

cannot call methods on button prior to initialization; attempted to call method 'disabled'

Ho messo insieme un codepen, visualizzare:

http://codepen.io/mattsnider/pen/mvcbD

Cosa dà? Il pageinit non funziona come documentato o si tratta di un bug?

Answer 1

Non c'è niente di sbagliato nell'evento pageinit. L'errore sta nel tag <a>.

Per rimuovere l'errore che stai ricevendo, dovrete fare due modifiche al codice:

1. sua non disabled, la sua disable
2. prima della chiamata al metodo disable, è necessario chiamare il metodo button(). Pertanto, avresti inizializzato l'elemento button.

Questo è come il codice sarà simile ora:

$('#ageNext').button().button('disable'); 

Ma, se si esegue questa operazione, si otterrà un errore come questo:

Uncaught TypeError: Cannot call method 'addClass' of undefined

Il colpevole si trova nel codice che invoca il metodo disable

disable: function() { 
    this.element.attr("disabled", true); 
    this.button.addClass("ui-disabled").attr("aria-disabled", true); 
    //^^ Uncaught TypeError: Cannot call method 'addClass' of undefined  
    return this._setOption("disabled", true); 
} 

Vedete lo this.button lì? Questo diventerà undefined se l'elemento non è un pulsante reale.

Detto questo, ho il disable per funzionare solo su input[type=button] e <button/> tipo di elementi. Per qualche motivo, questo non funziona come previsto su <a/> rappresentazione di pulsanti. Ho questo a lavorare aggiungendo manualmente ui-disabled classe all'elemento, in questo modo:

$(document).on('pageinit', '#age', function (e) { 
    $('#ageNext').addClass('ui-disabled'); 
}); 

Demo: http://jsfiddle.net/hungerpain/gzAHT/

Answer 2

Questo può succedere anche se si dispone di tag HTML senza eguali, in particolare preoccupante è </div> senza precedentemente dichiarato <div>.

La prima cosa da verificare potrebbe essere che il codice HTML sia ben formato.