Question

以下是我的js小提琴的链接，其中我试图在ID为hover for popover的元素a1的悬停属性上显示弹出窗口。我面临的问题是，当页面第一次加载并悬停在该元素上时，弹出窗口不会显示。但是，当用户点击hover for popover然后执行悬停时，hover属性工作得非常好，请告诉我为什么它不会发生在页面加载事件上，我该如何修复它以便用户不要必须单击按钮，它会显示其中的任何内容。

注意：可以通过以下方式轻松完成，但问题是元素的ID是动态生成的，所以我不能将以下方法用于特定的一个id。

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

的jsfiddle： http://jsfiddle.net/weuWk/323/

Answer 1

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

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

然后，将popover添加到每个项目：

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

修改：要引用id（或任何其他属性），您可以按如下方式使用.attr()：

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

Answer 2

我认为问题来自于您在正确加载文档之前调用popover()函数，然后在示例中的$('#a1')之前可以匹配任何内容。

点击此处查看更新的jsfiddle：http://jsfiddle.net/weuWk/325/ 只有在您的文档准备就绪时才需要调用popover：

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

Answer 3

已修复http://jsfiddle.net/pieterwillaert/weuWk/327/

您所做的是以下内容：

当文档加载时，您遍历所有按钮（我使用'span'完成了您可以轻松更改它'.button'）

你给每个按钮一个popover

$(document).ready(function() {

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

});

悬停仅在用户点击元素时有效

3 个答案: