Question

MDL在网页加载时会升级其组件，因此<input> autofocus属性会失去焦点。我希望在MDL完成重新渲染后将注意力集中在此输入上。

我试图听一些页面准备事件（codepen）：

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

不适用于$(document)，$(document.body)和$('.mdl-layout')选择器我搜索过一些类似的事件，但没有运气，我错过了什么？当然我可以使用setTimeout，但我认为这不应该是一个解决方案

感谢。

Answer 1

您可以在布局元素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 2

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

Answer 3

我确信您可以收听mdl-componentupgraded事件：

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

MDL准备活动

3 个答案: