爲什麼我無法在需要它工作的表格上使引導程序彈出式工作？

我正在嘗試遵循示例here並創建彈出式表格行。當我只是複製代碼時，它就像一個魅力。但在我希望彈出窗口工作的表中，它失敗了。爲什麼我無法在需要它工作的表格上使引導程序彈出式工作？

我有以下的JavaScript代碼（同小提琴）：

// Popover 

var options = { placement: 'bottom', trigger: 'manual', html: true, title: 'This row' }; 

function createPopover(element, args) { 
    var href = $(element).data('popover-url'), txt = $(element).data('popover-content'); 
    var html = '<p>Challenge: Can you click the link in a popover?</p><p><a href="' + href 
+ '">' + txt + '</a></p>'; 

    $(element).data('content', html).popover(args); 
} 

function popoverPlacementBottom() { 
    createPopover($(this), options); 
} 

$('.row').each(popoverPlacementBottom); 

var insidePopover = false; 

function attachEvents(tr) { 
    $('.popover').on('mouseenter', function() { 
     insidePopover = true; 
    }); 
    $('.popover').on('mouseleave', function() { 
     insidePopover = false; 
     $(tr).popover('hide'); 
    }); 
} 

$('table').on('mouseenter', 'tr', function() { 
    var tr = $(this); 
    setTimeout(function() { 
     if (!insidePopover) { 
      $(tr).popover('show'); 
      attachEvents(tr); 
     } 
    }, 200); 
}); 

$('table').on('mouseleave', 'tr', function() { 
    var tr = $(this); 
    setTimeout(function() { 
     if (!insidePopover) $(tr).popover('hide'); 
    }, 200); 
});

，並嘗試對這個表popovers：

<table class="table table-condensed scrollable popup"> 
<thead> 
    <tbody id="logEvents"> 
    <tr class="row" data-popover-url="#url_for_row_1" data-popover-content="line 1" data- 
     original-title="" title=""> 
     <td class="col-md-1">18:27</td> 
     <td class="col-md-5">InfoService</td> 
     <td>Blabla...</td> 
    </tr> 
    </tbody> 
</table>

然而，這是行不通的。雖然它在下面的桌子上工作看起來像這樣：

<table class="popup"> 
<tbody> 
    <tr class="row" data-popover-url="#url_for_row_1" data-popover-content="line 1" data-original-   title="" title=""> 
    <td>the first line</td> 
    </tr> 
    </tbody> 
</table>

它爲什麼不能在它應該工作的表上工作？我希望有人能幫助我。

/編輯好的我自己製作小提琴HERE。

奇怪的是代碼在小提琴中工作。但在我的網頁上卻沒有。與小提琴的唯一區別是，TR行動態生成的，每次事件發生的功能：

return "<tr " + trClass + " data-popover-content='line 1' data-popover-url='#url_for_row_1'>" 
       + "<td class='col-md-1'>" + time + "</td>" 
       + "<td class='col-md-5'>" + item.Source + "</td>" 
     + "<td>" + item.DescriptionShort + "</td>" 


       // + "<td class='col-md-6'>" + "<a id='pop' data-content='test' data-   
       toggle='popover'>" + item.DescriptionShort + "</a></td>" 
       + "</tr>";

可這有什麼關係呢？（例如，ID和類是在文檔就緒之後發生的，而且每次發生新事件時我都需要重新分配類？如果是這樣，怎麼辦？如果是這樣，怎麼辦？

來源

2014-01-24 Erwin Rooijakkers

這兩個桌子上的彈出我可以看到它在小提琴 –

小提琴不是我的。這是我正在使用的示例。我只在小提琴中使用上層類型的表格，然後用上面的代碼實現它。 –

是從小提琴中刪除了html代碼，並將您的較高類型的表並運行查詢，popovers正在那裏工作。 –

好的問題出現在生成的代碼中！每次發生事件時都會生成<tr>，所以我不應該只在文檔準備好的情況下分配彈出事件，而且每次創建新行時都會彈出popover（）函數，並且添加了pop.popOver（）之後，新事件發生了新的一行。如下所示：

this.addData = function (item) { 
     var container = $(this.cId); 
    container.append(this.getEventHtml(item)); 
    pop.popOver(); 
}

現在彈出窗口顯示！Y EAH！感謝Suman Bogati的幫助。

來源

2014-01-24 18:52:28

爲什麼我無法在需要它工作的表格上使引導程序彈出式工作？

回答

相關問題