Evénement MDL ready

Question

MDL met à jour ses composants lors du chargement de la page, donc <input> avec l'attribut autofocus perd sa priorité. Je veux mettre l'accent sur cette entrée après que MDL ait fini de rediffuser.

Je suis en train d'écouter une la page de l'événement prêt (codepen):

$('input#srch').one('componentDidUpdate', function(){console.log('ready')}); 

ne fonctionne pas avec ni $(document) ni $(document.body) ni $('.mdl-layout') sélecteurs.
J'ai googlé pour des événements similaires mais pas de chance, ai-je oublié quelque chose?
Bien sûr, je peux utiliser setTimeout mais je ne pense pas que cela devrait être une solution

Merci.

Answer 1

Je suis sûr que vous pouvez écouter l'événement mdl-componentupgraded:

$('input#srch').bind('mdl-componentupgraded', function(){console.log('ready')}); 

Answer 2

Vous pouvez écouter l'événement mdl-componentupgraded sur l'élément de mise en page, .mdl-ayout.

$(document).ready(function() { 
    $('.mdl-layout').on('mdl-componentupgraded', function(e) { 
     if ($(e.target).hasClass('mdl-layout')) { 
      alert('ready'); 
     } 
    }); 
}); 

Utilisation on au lieu de one. Votre page peut avoir plusieurs éléments en cours de mise à niveau. En utilisant one vous allez attraper seulement la première mise à niveau. Avec on, le gestionnaire sera appelé plusieurs fois en raison d'un événement de formation de bulles. Vérifiez e.target pour réagir à la mise à niveau spécifique de l'élément de présentation. Un rappel $(document).ready() utilise un rappel. Attendez que le DOM soit prêt avant d'attacher des gestionnaires à ses éléments. Sinon, le sélecteur $('.mdl-layout') risque de ne pas correspondre et le gestionnaire d'événements risque de ne pas se connecter.

Answer 3

/* Check if the material design has finished the rendering */ 

var mdlLoaded = setInterval(function(){ 
    if(typeof document.querySelector('.mdl-js-layout') !== 'undefined') init() 
}, 100) 

function init() { 
    clearInterval(mdlLoaded) 
    alert('ready') 
}