0

以下是我的 js fiddle 的链接，我试图在其中显示hover for popover带有 id的元素的悬停属性的弹出框a1。我面临的问题是，当页面首次加载并悬停在该元素上时，弹出框不会显示。但是当用户单击hover for popover然后进行悬停时，hover属性工作得非常好请让我知道为什么它没有发生在页面加载事件中以及我该如何修复它以便用户不必单击按钮并显示任何内容在里面。

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

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

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

4

3 回答 3

3

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

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

然后，将弹出框添加到每个项目：

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

编辑：要引用id（或任何其他属性），您可以使用.attr()如下：

$(document).ready(function(){
    $('.hoverable').each(function(){
      $(this).popover({title: $(this).attr('id')});
    });
});
于 2012-12-07T15:10:57.813 回答
2

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

在此处检查您更新的 jsfiddle：http: //jsfiddle.net/weuWk/325/ 只有当您的文档准备好时，您才需要调用 popover：

$(document).ready(function() {
    $('#a1').popover({title: "Hello"});
});
于 2012-12-07T15:09:26.153 回答
0

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

您所做的是以下内容：

  • 加载文档时，您遍历所有按钮（我通过使用'span'您也可以轻松更改'.button'）

  • 你给每个按钮一个弹出框

    $(document).ready(function() {

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

});​
于 2012-12-07T15:12:59.013 回答