popovers Bootstrap không làm việc trong bảng

Question

Tôi đã bao gồm những điều sau đây trong tập tin html của tôi:

<h:outputStylesheet name="css/bootstrap.css" /> 
<h:outputScript name="js/jquery-2.0.2.min.js" /> 
<h:outputScript name="js/bootstrap-tooltip.js" /> 
<h:outputScript name="js/bootstrap-popover.js" /> 

Phần đó là nghĩa vụ để làm cho popover:

<ui:repeat var="lowFareCalenderSearchItem" value="#{lowFareCalenderSearchItems}"> 
    <td> 
     <a href="#" id="searchItem" class="btn" rel="popover">#searchResult.getTotal()}</a> 
     <script> 
     $("#searchItem").popover({ 
      title: "title", 
     content: "content" 
     }); 
     </script>        
    </td> 
</ui:repeat> 

Các popovers Tôi đang cố gắng để hiển thị không bật lên khi tôi di chuột qua hoặc nhấp vào nút.

Tôi đã xem xét các câu hỏi tương tự khác và không có gì tôi tìm thấy ở đó đã làm việc cho tôi.

Có ai biết tại sao điều này có thể xảy ra không?

Answer 1

Hóa ra là cửa sổ bật lên không thể được đặt vào ô bảng.

Tôi giải quyết nó bằng cách sử dụng một div và span bên trong tế bào:

<td> 
    <div> 
     <span id="searchItem" rel="popover"> 
      Click to pop 
     </span> 

     <script> 
      $(document).ready(function() { 
       $("#searchItem").popover({ 
        html: true, 
        animation: false, 
        content: "TO BE ANNOUNCED", 
        placement: "bottom" 
       }); 
      }); 
     </script> 
    </div> 
</td>