MDL ready olayı

Question

MDL, özniteliğini gevşetiyor. MDL yeniden işlemeyi bitirdikten sonra bu girişe odaklanmak istiyorum.

Bazı sayfa hazır olay (codepen) dinlemeye çalışıyorum:

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

değil çalışma ne $(document) ne $(document.body) ne de $('.mdl-layout') ile seçicileri.
Bazı benzer etkinliklere baktım ama şans yok, bir şey özlüyor muyum?
setTimeout'u kullanabilirim ama bunun bir çözüm olması gerektiğini düşünmüyorum.

Teşekkürler.

Answer 1

Sana mdl-componentupgraded olayı dinlemek eminim:

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

Answer 2

Sen düzeni elemanı, .mdl-ayout üzerinde mdl-componentupgraded olay dinleyebilirsiniz.

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

Kullanım on yerine one. Sayfanız yeni sürüme geçirilmiş öğelere sahip olabilir. one kullanarak sadece ilk yükseltmeyi yakalayacaksınız. on ile işleyici, olay köpürme nedeniyle birden çok kez çağrılacaktır. Düzen öğesinin belirli yükseltmesine tepki vermek için e.target'u kontrol edin.

$(document).ready() geri bildirimini kullanın. İşleyicilere öğelerini eklemeden önce DOM'ın hazır olmasını bekleyin. Aksi halde, $('.mdl-layout') seçicisi eşleşmeyebilir ve olay işleyicisi eklenmeyebilir.

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