先说下遇到这个问题的背景吧。就是在页面中有个div,这个div右上角(或者其他位置)有个 × 的图标(这个图标添加tooltip工具提示),光标移到这个图标时,触发tooltip,提示“点击移除”这样类似的字样,然后点击 ...
先说下遇到这个问题的背景吧。
就是在页面中有个div,这个div右上角(或者其他位置)有个 × 的图标(这个图标添加tooltip工具提示),光标移到这个图标时,触发tooltip,提示“点击移除”这样类似的字样,然后点击后,把这个div作remove()这样的删除操作。
然后,问题来了,因为这个div被remove()了,导致生成的tooltip对应的 × 图标也被remove(),因为找不到,所以对应的mouseout(可能是mouseleave事件,参考了一下bootstrap的源码,没找出头绪,猜测是这两个的其中一个)事件就没法触发,导致tooltip工具提示一直在那里,出bug了。
文字不多讲,上图比较直观。
先把代码附上:
【代码部分】(里面的bootstrap文件和js用的本地的,有需要自己尝试运行的到时候需要改动一下):
<!DOCTYPE html><html lang="zh-CN"><head> <title>test</title> <meta charset="utf-8"> <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="./font-awesome/css/font-awesome.min.css"> <script src='/images/loading.gif' data-original="./bootstrap/js/jquery-1.11/jquery.min.js"></script> <script src='/images/loading.gif' data-original="./bootstrap/js/bootstrap.min.js"></script></head><body> <div style="width:70%;margin:50px auto;height:300px;"> <a id="test01" href="javascript:;" data-toggle="tooltip" title="反馈错误" data-placement="top" data-container="body"> <span class="fa fa-bug"></span> </a> <a id="test" href="javascript:;" data-toggle="tooltip" title="点击移除" data-placement="top" data-container="body"> <span class="fa fa-times"></span> </a> </div> <script> $("[data-toggle='tooltip']").tooltip(); $("#test").on("click",function(){ var $this = $(this); $this.remove(); $(".tooltip.fade.top.in").remove();//这行代码是我个人用来解决这个问题而添加的 }) </script></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:关于【bootstrap】中,【tooltip】的不算bug的bug的个人看法
关键词:ip
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。