javascript - 如何将 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

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

cache: false

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

JSFIDDLE