एमडीएल तैयार घटना

Question

MDL पृष्ठ लोड पर अपने घटकों को अपग्रेड कर रहा है, इसलिए <input>autofocus विशेषता के साथ अपना ध्यान खो देता है। एमडीएल फिर से प्रस्तुत करने के बाद मैं इस इनपुट पर ध्यान केंद्रित करना चाहता हूं।

मैं कुछ पेज तैयार घटना (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-ayout पर mdl-componentupgraded घटना को सुन सकते हैं।

$(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() कॉलबैक का उपयोग करें। हैंडलर को अपने तत्वों से जोड़ने से पहले डीओएम तैयार होने की प्रतीक्षा करें। अन्यथा $('.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') 
}