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在最後一行不起作用

回答

相關問題