Question

我正在尝试在HTML页面上实现Bootstrap popover。
我有一个HTML表格中的弹出窗口，我正在动态构建，我怀疑我没有正确注册该事件。

我的HTML：

$.each(JSON.parse(data), function (index, elem) {                 
    var radioBtn = "<input type='radio' name='radOption' class='radio selectedOptionAdd' data-value='myData' />";     
    var popupContent = "TO DO MAKE A TABLE OF DATA";
    var popupControl = "<a class='btn btn-lg btn-danger permissionPopUpButton' role='button' data-toggle='popover' data-trigger='focus' title='Dismissible popover' data-content='" + popupContent + "'>Dismissible popover</a>";
    myTable += "<tr><td>" + radioBtn + "</td><td>" + popupControl  + "</td></tr>";
});

在我的文件中。我有以下声明：

// Originally tried this but this doesn't work
//$('[data-toggle="popover"]').popover();

$("body").on("click", ".permissionPopUpButton", function () {
    $('[data-toggle="popover"]').popover();
});

有关如何正确注册此事件的任何建议吗？

Answer 1

我发现这会起作用。

$("body").on("click", ".permissionPopUpButton", function () {
    $(".popover").css("width", "276px");
    $('[data-toggle="popover"]').popover();        
});

但是我错过了“tabindex ='0'。一旦我将其添加到我的标签中，弹出窗口就开始工作了！

var popupControl = "<a tabindex='0' class='btn btn-lg btn-danger permissionPopUpButton' role='button' data-toggle='popover' data-trigger='focus' title='I am a title' data-content='I AM CONTENT HEAR ME ROAR'>Dismissible popover</a>";

如何在动态表中使用Bootstrap popover

1 个答案: