如何使用 MaterialDesign Lite 正确附加 TextField?
how to append a TextField properly with MaterialDesign Lite?
我尝试用 jQuery 附加一个新的 text with floating label
,但我附加的文本字段不是动画的。
如何制作动画?
这是我的 jQuery 代码:
$('body').on('keypress', '.stepcity', function(e){
let keyCode = e.keyCode || e.which;
if (keyCode == 9 || keyCode == 13)
{
e.preventDefault();
let id = $('stepcity').length + 1;
$('#StepCities').append('<div class="mdl-grid mdl-cell--7-col"><div class="mdl-cell--2-col CreateGroupIcons"><i class="fa fa-dot-circle-o"></i></div><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--10-col"><input class="mdl-textfield__input hightlyVisible stepcity" type="text" id="StepCity'+id+'"><label class="mdl-textfield__label" for="StepCity'+id+'">Step City</label></div></div>');
}
});
谢谢!
如果您对 DOM 进行更改,Material-Handlers(就像您错过的动画)将不会应用到这些更改。
在附加 html 之后,您必须在 javascript 中调用 componentHandler.upgradeDom();
。然后它应该表现得像预期的那样。
这似乎也是错误的:let id = $('stepcity').length + 1;
它可能应该是 class 或 id-selector.
我尝试用 jQuery 附加一个新的 text with floating label
,但我附加的文本字段不是动画的。
如何制作动画?
这是我的 jQuery 代码:
$('body').on('keypress', '.stepcity', function(e){
let keyCode = e.keyCode || e.which;
if (keyCode == 9 || keyCode == 13)
{
e.preventDefault();
let id = $('stepcity').length + 1;
$('#StepCities').append('<div class="mdl-grid mdl-cell--7-col"><div class="mdl-cell--2-col CreateGroupIcons"><i class="fa fa-dot-circle-o"></i></div><div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-cell--10-col"><input class="mdl-textfield__input hightlyVisible stepcity" type="text" id="StepCity'+id+'"><label class="mdl-textfield__label" for="StepCity'+id+'">Step City</label></div></div>');
}
});
谢谢!
如果您对 DOM 进行更改,Material-Handlers(就像您错过的动画)将不会应用到这些更改。
在附加 html 之后,您必须在 javascript 中调用 componentHandler.upgradeDom();
。然后它应该表现得像预期的那样。
这似乎也是错误的:let id = $('stepcity').length + 1;
它可能应该是 class 或 id-selector.