Question

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

Answer 1

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

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

fiddle

Answer 2

试一下

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

Bootstrap Popover不在最后一行

2 个答案: