Bootstrap Popover在最后一行不起作用

我正在使用Bootstrap popover。它不显示在最后一行。我正在使用jquery each函数来循环。Bootstrap Popover在最后一行不起作用

下面是代码：

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

来源

2014-03-04 user3365207

试试这个

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

来源

2014-03-05 11:29:35

移动此行到脚本的末尾，for循环之外：

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

fiddle

来源

2014-03-05 11:25:02 slash197

Bootstrap Popover在最后一行不起作用

回答

相关问题