Javascript 引导弹出框不显示_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 引导弹出框不显示

javascript jquery html css twitter-bootstrap

Javascript 引导弹出框不显示,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,目前我有一个没有初始化的popover设置。我的代码如下： HTML: 我已经包含了CSS和库所需的所有内容，并成功地在这里复制了这个问题：到目前为止，我已经尝试将初始化文本移动到JS文件中的不同位置，以排除任何层次结构问题 $('[data-toggle="popover"]').popover() 打开它 $('[data-toggle="popover"]').popover('show'); 我已更新您的代码，请检查以下代码： $（文档）.ready（函数（）{ $（'[data

目前我有一个没有初始化的popover设置。我的代码如下：

HTML:

我已经包含了CSS和库所需的所有内容，并成功地在这里复制了这个问题：

到目前为止，我已经尝试将初始化文本移动到JS文件中的不同位置，以排除任何层次结构问题

$('[data-toggle="popover"]').popover()

打开它

$('[data-toggle="popover"]').popover('show');

我已更新您的代码，请检查以下代码：

$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover({
位置：'底部'
});
});
点击我

检查这一项这将对您有所帮助

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />


    <!-- Le styles -->
    <link href="style.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

  </head>

  <body>
    <a href="#" data-toggle="popover" title="Popover Header" data-content="XYZ">Toggle popover</a>


    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
          $('[data-toggle="popover"]').popover();   
      });
    </script>
  </body>

</html>


引导，来自Twitter
$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover（）；
});

您忘记加载外部资源

从文档中：

如何触发弹出框-单击|悬停|聚焦|手动。你可以传递多个触发器；用空格隔开它们。手册不能是与任何其他触发器相结合

您需要定义触发器

data trigger=“hover”

：

。。。

看看这个

PS：您的jQuery脚本实际上可以工作，但它只会在单击时触发。

刚刚将jQuery脚本包装成这样：

jQuery(function ($) {
    $('[data-toggle="popover"]').popover();
});

或者，如果要将脚本加载到

document ready

，请使用以下命令：

jQuery(document).ready(function($){
    $('[data-toggle="popover"]').popover();
});

原因：

导致jQuery
和普通js/其他库之间的名称冲突
，因此您必须以不同的方式调用它，以便浏览器知道jQuery而不是其他库正在使用它

下面是一个包含上述代码的JSFIDLE:

您在该JSFIDLE上的js文件包括在哪里？您有一个错误

TypeError:$（…）。popover不是一个函数

js库不包含在该小提琴中您忘了在小提琴中包含引导的

CSS

和

js

。也许你的代码里也有同样的东西？工作：这修复了小提琴，但在我的代码中仍然没有修复-在我的代码中，popover在一个表中-这会有什么不同吗？@LianeStevenson如果可以的话，你能分享你的实时url吗？您确定已正确加载所有必需的文件吗？不过，它在小提琴上工作。表是在运行时创建/添加的吗？这不是他的问题。即使在jsFiddle上没有@LeftyX，它也可以工作，但在浏览器上，他需要添加那个包装器。这个家伙和他有同样的问题：这个人也是这样的：请考虑编辑你的帖子，为你的代码做更多的解释，以及为什么它会解决这个问题。一个只包含代码的答案（即使它在工作）通常不会帮助OP理解他们的问题。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8" />
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />


    <!-- Le styles -->
    <link href="style.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />

  </head>

  <body>
    <a href="#" data-toggle="popover" title="Popover Header" data-content="XYZ">Toggle popover</a>


    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
      $(document).ready(function(){
          $('[data-toggle="popover"]').popover();   
      });
    </script>
  </body>

</html>

<div data-trigger="hover" data-toggle="popover" data-placement="bottom" data-content="xyz">...</div>

jQuery(function ($) {
    $('[data-toggle="popover"]').popover();
});

jQuery(document).ready(function($){
    $('[data-toggle="popover"]').popover();
});