如何使用动态生成的 webui-popover table (JQuery)

Question

我有一个 table 以表格形式将一些结果输出到屏幕。对于每个 table 行，我都有一个带有图标（更多）的列。我想要实现的是，对于每个图标，在单击时，它会显示一个弹出窗口，类似于 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');

首先，我获取带有 class 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>

开箱即用，您可以看到点击 "more" 图标后每一行都应该显示弹出窗口，但它并没有这样做。

Answer 1

我认为这是因为每个弹出窗口都共享相同的内容。您可以通过添加来修复它：

cache: false

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

JSFIDDLE

如何使用动态生成的 webui-popover table (JQuery)

How to use webui-popover with dynamically generated table (JQuery)

javascript

jquery

popover