MDL 就绪事件
Posted
技术标签:
【中文标题】MDL 就绪事件【英文标题】:MDL ready event 【发布时间】:2016-05-31 05:10:40 【问题描述】:MDL 在页面加载时升级其组件,因此带有autofocus
属性的<input>
失去了焦点。我想在 MDL 完成重新渲染后将此输入设置为焦点。
我正在尝试收听某些页面 ready 事件 (codepen):
$('input#srch').one('componentDidUpdate', function()console.log('ready'));
不适用于 $(document)
或 $(document.body)
或 $('.mdl-layout')
选择器。
我搜索了一些类似的事件,但没有运气,我错过了什么吗?
当然我可以使用setTimeout
,但我认为这不应该是一个解决方案????
【问题讨论】:
【参考方案1】:/* 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')
【讨论】:
【参考方案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()
回调。在将处理程序附加到其元素之前等待 DOM 准备就绪。否则$('.mdl-layout')
选择器可能不匹配并且事件处理程序可能不会附加。
【讨论】:
使用 firefox,mdl-componentupgraded 调用仅在我加载页面后进行,然后刷新它......你知道为什么会这样吗?适用于 Chrome【参考方案3】:我相信你可以收听mdl-componentupgraded
事件:
$('input#srch').bind('mdl-componentupgraded', function()console.log('ready'));
【讨论】:
以上是关于MDL 就绪事件的主要内容,如果未能解决你的问题,请参考以下文章