MDL ready event

Question

MDL aktualisiert seine Komponenten beim Laden der Seite, so <input> mit autofocus Attribut verliert seinen Fokus. Ich möchte einen Fokus auf diese Eingabe legen, nachdem MDL das erneute Rendern beendet hat.

Ich versuche, zu einem gewissen Seite bereit Ereignis (codepen) zu hören:

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

Problem weder mit $(document) noch $(document.body) noch $('.mdl-layout') Selektoren.
Ich habe für einige ähnliche Veranstaltungen gegoogelt, aber kein Glück, vermisse ich etwas?
Sicher kann ich setTimeout verwenden, aber ich denke nicht, dass das eine Lösung sein sollte

Danke.

Answer 1

Ich bin sicher, dass Sie das mdl-componentupgraded Ereignis hören können:

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

Answer 2

Sie zum mdl-componentupgraded Ereignisse auf dem Layoutelement hören, .mdl-ayout.

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

Verwenden on statt one. Auf Ihrer Seite können mehrere Elemente aktualisiert werden. Mit one fangen Sie nur das erste Upgrade. Mit on wird der Handler wegen Event-Bubbling mehrere Male aufgerufen. Aktivieren Sie e.target, um auf das spezifische Upgrade des Layoutelements zu reagieren.

Verwenden Sie einen Rückruf $(document).ready(). Warten Sie, bis das DOM bereit ist, bevor Sie Handler an seine Elemente anhängen. Andernfalls stimmt der Selektor $('.mdl-layout') möglicherweise nicht überein, und der Ereignishandler wird möglicherweise nicht angehängt.

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') 
}