jquery - Bootstrap Popover在最后一行上不起作用

我正在使用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

最佳答案

尝试这个

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