你的位置:首页 > 软件开发 > 网页设计 > 关于【bootstrap】中,【tooltip】的不算bug的bug的个人看法

关于【bootstrap】中,【tooltip】的不算bug的bug的个人看法

发布时间:2016-01-05 23:00:05
先说下遇到这个问题的背景吧。就是在页面中有个div,这个div右上角(或者其他位置)有个 × 的图标(这个图标添加tooltip工具提示),光标移到这个图标时,触发tooltip,提示“点击移除”这样类似的字样,然后点击 ...

关于【bootstrap】中,【tooltip】的不算bug的bug的个人看法

先说下遇到这个问题的背景吧。

就是在页面中有个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

ip
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。