jquery - MDL 就绪事件

Question

MDL正在页面加载时升级其组件，因此 <input>与 autofocus属性失去焦点。我想在 MDL 完成重新渲染后将焦点设置在此输入上。

我正在尝试监听某些页面准备就绪事件( codepen ):

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

不与$(document)一起工作也不$(document.body)也不$('.mdl-layout')选择器。
我在谷歌上搜索了一些类似的事件，但没有运气，我错过了什么吗？
当然我可以使用setTimeout但我不认为这应该是一个解决方案😁

Answer 1

您可以监听布局元素 .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以对布局元素的特定升级使用react。

使用 $(document).ready() 回调。等待 DOM 准备就绪，然后再将处理程序附加到其元素。否则，$('.mdl-layout') 选择器可能不匹配，并且事件处理程序可能无法附加。