如何使用webui-popover与动态生成的表（JQuery）

Question

我有一个表格以表格形式向屏幕输出一些结果。对于每个表行，我有一个带有图标的列（更多）。我想要实现的是，对于每个图标，在点击时，它会显示一个弹出窗口，类似于Tidal所做的。但到目前为止，它只适用于列表中的最后一项。我正在使用webui-popover来完成这项工作。

这是我到目前为止所做的。请注意，webui-popover的CSS和JavaScript已正确包含在项目中。

我的行的HTML标记：

<tr>
  <td>'.$name.'</td>
  <td>'.$title.'</td>
  <td>
    <a id="'.$id.'" class="more" data-id="'.$id.'" href="javascript:void(0);">
      <i class="material-icons">more_horiz</i>
    </a>
  </td>
</tr>

我的JavaScript功能：

var more = document.getElementsByClassName('more');

首先，我获得了课程more的所有项目，并循环使用它们：

for (var i = 0; i < more.length; i++) {

   more[i].onclick = function(){
   var uid = this.dataset.id;

    // Popover
    $('#'+i).webuiPopover({
      url:'#pop-content',
      trigger:'click' ,
      style: 'v2',
      placement:'bottom-left',
      animation:'pop',
      width: '180'});
    }
 }

用于弹出内容的HTML：

<div id="pop-content">
  <a class="collection-item title">Signed in as</a>
  <div class="divider"></div>
  <a href="#!" class="collection-item">Support</a>
  <div class="divider"></div>
  <a href="#!" class="collection-item">Settings</a>
</div>

开箱即用，您可以看到每一行都应该在点击“更多”图标时显示弹出窗口，但它没有这样做。

Answer 1

我认为这是因为每个pop-over共享相同的内容。你可以通过添加：

来修复它

cache: false

除此之外，您应该在'onclick'监听器之外设置webuiPopover。听众似乎完全是多余的，可以删除，除非你在其他地方使用变量'uid'。我已根据您的代码创建了一个工作示例：

JSFIDDLE