MDL 使用 JS 添加工具提示
舍申克 S。
我正在制作一个聊天网络应用程序，其中有表情符号。
我正在使用 MDL 来制作这个，对于表情符号，我使用的是工具提示。请参阅此预期行为的图片：
所以无论如何，把这些表情符号放在这里是我的代码
messageElement.innerHTML = messageElement.innerHTML.replace(/:alien:/g, '<div id=":alien:"><img class="emoji" src="https://greenbayrules.github.io/host/emojis/faceemoji/alien.png" /> </div><div class="mdl-tooltip" data-mdl-for=":alien:">:alien:</div>');
每当在数据库中收到新消息时，就会运行此代码。
问题是这些表情符号工具提示不起作用。这些元素出现在检查元素中，但它们不会在悬停时出现。另一方面，如果我复制粘贴相同的 HTML 元素并将其放入代码的 HTML 中，则它工作正常。
这让我认为 MDL 在加载网站时会执行某种脚本，激活所有工具提示。
首先，这里有什么问题？如果问题是此脚本在我添加表情符号的脚本之前运行，那么我如何重新运行该脚本，以便我的表情符号加载并运行工具提示？
姆帕兰施
你试过使用componentHanlder.upgradeElement吗？例如：
messageElement.innerHTML = messageElement.innerHTML.replace(/:alien:/g, '<div id=":alien:"><img class="emoji" src="https://greenbayrules.github.io/host/emojis/faceemoji/alien.png" /> </div>');
var tooltip = document.createElement('div');
tooltip.className = 'mdl-tooltip';
tooltip.setAttribute('data-mdl-for', ':alien:');
tooltip.innerHTML = ':alien:'
componentHandler.upgradeElement(tooltip);
messageElement.appendChild(tooltip);
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
编辑于
相关文章
TOP 榜单
- 1
Linux的官方Adobe Flash存储库是否已过时？
- 2
用日期数据透视表和日期顺序查询
- 3
应用发明者仅从列表中选择一个随机项一次
- 4
Java Eclipse中的错误13，如何解决？
- 5
在Windows 7中无法删除文件（2）
- 6
在 Python 2.7 中。如何从文件中读取特定文本并分配给变量
- 7
套接字无法检测到断开连接
- 8
带有错误“ where”条件的查询如何返回结果？
- 9
有什么解决方案可以将android设备用作Cast Receiver？
- 10
Mac OS X更新后的GRUB 2问题
- 11
ggplot：对齐多个分面图-所有大小不同的分面
- 12
验证REST API参数
- 13
如何从视图一次更新多行（ASP.NET - Core）
- 14
尝试反复更改屏幕上按钮的位置 - kotlin android studio
- 15
计算数据帧中每行的NA
- 16
检索角度选择div的当前值
- 17
离子动态工具栏背景色
- 18
UITableView的项目向下滚动后更改颜色，然后快速备份
- 19
VB.net将2条特定行导出到DataGridView
- 20
蓝屏死机没有修复解决方案
- 21
通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException
我来说两句