Bootstrap Popover 在最后一行不起作用答案

【问题标题】：Bootstrap Popover is not working on last rowBootstrap Popover 在最后一行不起作用
【发布时间】：2014-04-06 10:38:35
【问题描述】：

我正在使用Bootstrap popover。它没有显示在最后一行。我正在使用 jquery each 函数进行循环。

代码如下：

HTML:
<table id="Tableid" class="table " >
</table>


JS:

var table = $('#Tableid');
var hostId = 1;
var count = 0;
var row = $('<tr></tr>').addClass('test');
for(var i=0; i<10; i++){            

    for(j=0; j<3; j++){

        var button = "<button data-content = \""+hostId+"\" data-id=\""+hostId+"\"class=\"btn btn-primary btn-lg open-InfoModal\" data-toggle=\"modal\" rel=\"popover\" data-target=\"#hostInfo\" href=\"#infoModal\"></button>";
           $("[rel='popover']").popover({trigger: "hover"});

        var cell = $('<td style="text-align:center">'+hostId+'</td>').addClass('test').wrapInner(button);    //We use wrapInner to add HTML content
        hostId++;
        row.append(cell);
    }
    if(count<1) {
        count++;
    } else {

    table.append(row);
    row = $('<tr></tr>').addClass('test');
    count = 0;
    }
}

这是我的JSFiddle

【问题讨论】：

标签： jquery twitter-bootstrap popover bootstrap-popover

【解决方案1】：

试试这个

var table = $('#Tableid');
var hostId = 1;
var count = 0;
var row = $('<tr></tr>').addClass('test');
for(var i=0; i<10; i++){            

    for(j=0; j<3; j++){

        var button = "<button data-content = \""+hostId+"\" data-id=\""+hostId+"\"class=\"btn btn-primary btn-lg open-InfoModal\" data-toggle=\"modal\" rel=\"popover\" data-target=\"#hostInfo\" href=\"#infoModal\"></button>";

        var cell = $('<td style="text-align:center">'+hostId+'</td>').addClass('test').wrapInner(button);    //We use wrapInner to add HTML content
        hostId++;
        row.append(cell);
    }
    if(count<1) {
        count++;
    } else {

    table.append(row);
        row = $('<tr></tr>').addClass('test');
        count = 0;
    }
}

$("[rel='popover']").each(function(i, e){
    $(e).popover({trigger: "hover"});
});

在这里查看 JsFiddle

【讨论】：

【解决方案2】：

将此行移到脚本末尾，在 for 循环之外：

$("[rel='popover']").popover({trigger: "hover"});

fiddle

【讨论】：