相关疑难解决方法(0)

我在动态列表中使用Twitter Bootstrap的popover.列表项有一个按钮,当我单击按钮时,它应该显示弹出窗口.当我在非动态测试时,它工作正常.

这是我的非动态列表的JavaScript

$("button[rel=popover]").popover({ 
    placement : 'right',
    container : 'body',
    html : true,
    //content:" <div style='color:red'>This is your div content</div>"
    content: function() {
      return $('#popover-content').html();
    }

    })
    .click(function(e) {
        e.preventDefault();
});

但是,它在动态列表上不能很好地工作.当我单击"两次"按钮时它会显示出来,并且只显示一个列表项我点击一次.

我的HTML:

 <ul id="project-list" class="nav nav-list">
   <li class='project-name'>
     <a >project name 1
         <button class="pop-function" rel="popover" ></button>
     </a>
   </li>
   <li class='project-name'>
     <a>project name 2
        <button class="pop-function" rel="popover" ></button>
     </a>
   </li>

 </ul>

<div id="popover-content" style="display:none">
    <button class="pop-sync"></button>
    <button class="pop-delete"></button>
</div>

我的动态JavaScript:

$(document).on("click", "#project-list li" , function(){
   var username = $.cookie("username");
   var …

使用引导弹出窗口时，您必须像这样在您的 javascript 代码中初始化它们$('#element').popover();。通常你会为此使用一个$(document).ready();函数。但是如果 popover 绑定到的元素是由 ajax 本身加载的呢？

由于对 javascript 不完全有信心，我目前面临的问题是有一个页面通过多个 ajax 调用加载了大部分内容。这些元素之一是：

<span class="infolink" style="vertical-align:bottom;"  data-title="some title" data-placement="bottom" data-delay="500" data-content="some content"> 
Trigger Popover 
</span>

我想到的一种解决方案是，在每次 ajax 调用循环遍历所有元素并初始化弹出窗口（例如：）之后$('.infolink').each(function(i,e){e.popover();});。我不想这样做，因为考虑到 ajax 调用的数量和页面的大小，这会损害性能。有没有其他办法？

另一个想法是拥有一个函数（例如function initializePopover(element){...}）并在元素加载后调用它<span class="infolink" [...] onload="initializePopover(this)"></span>。但这也不起作用。

是否有关于如何初始化弹出窗口的最佳实践，其中触发元素本身将由 ajax 加载？