MDL準備完了イベント

Question

MDLは、ページロード時にコンポーネントをアップグレードしているため、autofocus属性を持つ<input>のアトリビュートが失われます。 MDLが再レンダリングを終了した後、この入力に焦点を当てたいと思っています。

私はいくつかのページ準備イベント（codepen）を聞くしようとしています：

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

ない作業でもない$(document)も$(document.body)も$('.mdl-layout')とセレクタを。
私はいくつかの同様のイベントのためにグーグルしましたが、運がない、私は何かを逃していますか？
確かに私はsetTimeoutを使用することができますが、私はそれが解決策でなければならないとは思わない。

ありがとう。

Answer 1

私はあなたがmdl-componentupgradedイベントに耳を傾けることができ確信している：

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

Answer 2

あなたはレイアウト要素のmdl-componentupgradedイベント、.mdl-ayoutを聞くことができます。

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

利用onの代わりone。ページに複数の要素がアップグレードされている可能性があります。 oneを使用すると、最初のアップグレードのみをキャッチします。 onを指定すると、イベントのバブリングのためにハンドラが複数回呼び出されます。 e.targetをチェックして、レイアウト要素の特定のアップグレードに対応します。

$(document).ready()コールバックを使用してください。ハンドラを要素にアタッチする前に、DOMの準備が整うのを待ちます。そうしないと、$('.mdl-layout')セレクタが一致せず、イベントハンドラが接続されない可能性があります。

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