javascript - 如何让引导弹出框与动态生成的图像链接一起使用？

Question

我正在尝试让 Bootstrap 2“弹出框”：

A）使用动态生成的内容和
B）在弹出框内显示图像。

我当前的代码：

var image = '<img src="img/header/'+selection+'" />';
var previewLink = '<a class="headerPreview" href="#" rel="popover" >(Hover to Preview)    </a>';
$('#headerBlock').append(previewLink);
$('.headerPreview').popover({
    title: 'test',
    content: image
});

现在，当链接悬停在上面时，它什么也不做。我不确定我做错了什么。

Answer 1

试试这个：http: //jsfiddle.net/KAvAZ/

关键是添加trigger: 'hover'到您的 popover 对象。

Answer 2

每次您动态添加一些新内容时，如果您想让它启用弹出框（假设您已经添加了正确的 html 标签），则应在添加新内容后立即调用 popover() 函数。这就是我在原始内容和动态生成的内容上启用弹出窗口的方法。

该线程可能会有所帮助：Twitter Bootstrap Popovers not working for Dynamically Generated Content