動的生成テーブル（JQuery）でwebui-popoverを使用する方法

Question

テーブルをいくつか出力して、表形式で画面に出力します。テーブル行ごとに、アイコン付きの列があります（詳細）。私が達成したいのは、各アイコンについて、クリック時に、Tidalと同様のポップオーバーが表示されることです。しかし、これまでのところ、リスト内の最後の項目に対してのみ機能しています。これを行うにはwebui-popoverを使用しています。ここで

私がこれまで行ってきたものです。 webui-popover用のCSSとJavaScriptがプロジェクトに正しく組み込まれていることに注意してください。私の行の

私のHTMLマークアップを：

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

まず、私はクラスmoreですべてのアイテムを取得し、それらをループしています：機能のための

<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

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