我正在尝试设置 mdl 的值页面加载时的 slider 。为 mdl slider 设置值的推荐方法是这样的 -
document.querySelector('#slider').MaterialSlider.change(value);
然而,这会引发错误 TypeError: document.querySelector(...).MaterialSlider is undefined
如果从 $(document).ready()
调用或 $(window).load()
.
在其上设置一秒的超时可以解决问题,但看起来很老套。 我可以将它绑定(bind)到任何其他事件以确保它有效吗?
这就是我加载脚本的方式 --
//mobile optimized
meta(name='viewport', content='width=device-width, initial-scale=1.0')
//css
link(rel='stylesheet', href='/stylesheets/style.css')
//material-design-lite
link(rel='stylesheet', href='/bower_components/material-design-lite/material.min.css')
script(src='/bower_components/material-design-lite/material.min.js')
link(rel='stylesheet', href='https://fonts.googleapis.com/icon?family=Material+Icons')
//jQuery
script(src='/bower_components/jquery/dist/jquery.min.js')
//Material icon fonts
//link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")
link(href='https://fonts.googleapis.com/css?family=Open+Sans', rel='stylesheet', type='text/css')
//polyfill (support for dialog)
script(src="/bower_components/dialog-polyfill/dialog-polyfill.js")
link(rel="stylesheet", type="text/css", href="/bower_components/dialog-polyfill/dialog-polyfill.css")
最佳答案
我花了几个月的时间,但终于找到了解决方案。只需要添加这个——
$( document ).ready(function() {
componentHandler.upgradeAllRegistered();
// --- do stuff on mdl elements here ---
});
这有一个额外的好处,即在完全加载之前隐藏丑陋的 mdl 组件版本。
关于javascript - 在页面加载时修改 MDL 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39005063/