javascript - 使用 Bootstrap3 为多个动态添加的选择器提供不同的弹出窗口？

Question

我希望通过 Javascript 生成多个选择器，每个选择器都有自己的 popOver 内容，这些内容也是通过 Javascript 动态添加的。

如何让两个或更多人一起工作？

$(function()
{           
    $('body').popover({
        selector: '[rel=popOver1]',
        trigger: 'hover',
        animation: true,
        placement: 'bottom',
        content: 'contents1',
        html: true
    });

    $('body').popover({
        selector: '[rel=popOver2]',
        trigger: 'hover',
        animation: true,
        placement: 'bottom',
        content: 'contents2',
        html: true
    });
});


$('<p><a class="btn" rel="popOver1">popOver1</a></p>').appendTo('.buttons');

$('<p><a class="btn" rel="popOver2">popOver2</a></p>').appendTo('.buttons');

Answer 1

Thanks to @JasonP answering a follow-up question with this comment: http://jsfiddle.net/EdBc8/

Javascript

function createPopOver(selector, content) {
    $(selector).popover({
        //selector: selector,
        trigger: 'hover',
        placement: 'right',
        content: content,
        html: true
    });
}

function addBtn() {
    for (var i = 0; i < 5; i++) {

        $('.buttons').append("<p><a class='btn' rel='popOver" + i + "'>popOver" + i + "</a></p>");

        createPopOver('[rel="popOver' + i + '"]', "content for " + i);
    }
}

HTML

<div class="buttons">   </div>