Twitter bootstrap gsp标签中的Bootstrap popover

我对Javascript相当陌生，我认为这就是我的问题所在。我想使用引导弹出窗口来显示特定于弹出窗口数据的链接列表。因此，为了使用标准图书/作者示例，我想为每个作者显示一个弹出窗口，其中包含指向其所有图书的链接。在我的桌子里，我有：

<g:each in="${authors}" var="author">
    <tr>
        <td>${author.name}</td>
        <td>
            <a type="link" class="link popovers" title="Books"
                data-container="body" data-toggle="popover" data-placement="left"
                data-content="to be overwritten">Author's Books
         </td>
     </tr>
     <div id="popover_content_wrapper" style="display: none">
         <div>
             <g:render template="bookList" model="[data : author.bookList]"/>
         </div>
     </div>
</g:each>

---

假设我的模板工作正常，这仍然只显示所有弹出窗口的第一作者的数据。要为每个作者显示正确的popover，我需要做什么？

问题是您为所有作者使用相同的id popover\u content\u包装。尝试使用status属性为每个作者popover内容指定一个唯一的id，如下所示：

<g:each in="${authors}" var="author" status="i">
    <tr>
        <td>${author.name}</td>
        <td>
            <a type="link" class="link popovers" title="Books"
                data-container="body" data-toggle="popover" data-placement="left"
                data-contentId="popover_content_wrapper_${i}"
                data-content="to be overwritten">Author's Books
         </td>
     </tr>
     <div id="popover_content_wrapper_${i}" style="display: none">
         <div>
             <g:render template="bookList" model="[data : author.bookList]"/>
         </div>
     </div>
</g:each>

---

非常感谢。在我的版本中，我需要在声明popover之前放置popover\u content\u wrapper div，我不确定我是否做错了什么。还有，那是“危险”对吗？这不应该是上面某种类型的标识符吗？是的。更新了选择器。

<g:each in="${authors}" var="author" status="i">
    <tr>
        <td>${author.name}</td>
        <td>
            <a type="link" class="link popovers" title="Books"
                data-container="body" data-toggle="popover" data-placement="left"
                data-contentId="popover_content_wrapper_${i}"
                data-content="to be overwritten">Author's Books
         </td>
     </tr>
     <div id="popover_content_wrapper_${i}" style="display: none">
         <div>
             <g:render template="bookList" model="[data : author.bookList]"/>
         </div>
     </div>
</g:each>

$(function (){     
        $("[data-toggle='popover']").each(function( index ) {
            var contentId = $( this ).data('contentId');
            var contentElement = $("#" + contentId);

            $(this).popover ({html:true,
                 trigger: 'click',
                 content : function() {
                     return contentElement.html();
                })
            });

});