Javascript 仅当用户单击元素时，“悬停”才起作用

下面是指向我的js小提琴的链接，我试图在其中显示元素

hover for popover

的popover on hover属性，id为

a1

。我面临的问题是，当页面第一次加载并悬停在该元素上时，popover不会显示。但是，当用户单击popover的

鼠标悬停

然后执行鼠标悬停时，那么

鼠标悬停

属性工作得非常好，请告诉我为什么页面加载事件上没有发生这种情况，以及我如何修复它，这样用户就不必单击按钮并显示其中的任何内容

注意：这可以通过以下方法轻松完成，但问题是元素的id是动态生成的，因此我无法对特定的一个id使用以下方法

$(function ()
{ $("#example").popover();
});

JSFIDDLE:

---

我认为问题在于，您在文档正确加载之前调用了

popover（）

函数，然后在示例中的

$（'#a1'）

可以匹配任何内容之前调用该函数

在此处检查更新的JSFIDLE： 只有当文档准备就绪时，才需要调用popover，如下所示：

$(document).ready(function() {
    $('#a1').popover({title: "Hello"});
});

---

我认为问题在于，您在文档正确加载之前调用了

popover（）

函数，然后在示例中的

$（'#a1'）

可以匹配任何内容之前调用该函数

在此处检查更新的JSFIDLE： 只有当文档准备就绪时，才需要调用popover，如下所示：

$(document).ready(function() {
    $('#a1').popover({title: "Hello"});
});

---

首先，向所有悬停元素添加一个类：

<span id="a1" class="btn large primary hoverable">Popover</span>

编辑：要引用

id

（或任何其他属性），您可以使用以下方法：

$(document).ready(function(){
    $('.hoverable').each(function(){
      $(this).popover({title: $(this).attr('id')});
    });
});

---

首先，向所有悬停元素添加一个类：

<span id="a1" class="btn large primary hoverable">Popover</span>

编辑：要引用

id

（或任何其他属性），您可以使用以下方法：

$(document).ready(function(){
    $('.hoverable').each(function(){
      $(this).popover({title: $(this).attr('id')});
    });
});

固定的

您要做的是：

• 加载文档时，您可以遍历所有按钮（我通过使用

  'span'

  完成了此操作，您也可以轻松地更改该按钮。

  '

• 你给每个按钮一个爆米花

  $(document).ready(function() {
  
      $('span').each(function(index) {
           $(this).popover({title: "Hello"});
      });
  
  });​
  

固定

您要做的是：

• 加载文档时，您可以遍历所有按钮（我通过使用

  'span'

  完成了此操作，您也可以轻松地更改该按钮。

  '

• 你给每个按钮一个爆米花

  $(document).ready(function() {
  
      $('span').each(function(index) {
           $(this).popover({title: "Hello"});
      });
  
  });​
  

---

这实际上比我的答案要好：）好的最后一个问题如果点击事件我必须将id传递给该id上的popover，那么我的功能应该是什么？这实际上比我的答案要好：）好的最后一个问题如果点击事件我必须将id传递给该id上的popover，那么我的功能应该是什么？？