Member 12894616 Ответов: 0

Как использовать webui-popover с динамически генерируемой таблицей (jquery)

У меня есть таблица, выводящая некоторые результаты на экран в табличной форме. Для каждой строки таблицы у меня есть столбец со значком (подробнее). Чего я хочу добиться, так это того, что для каждого значка при щелчке он показывает всплывающее окно, похожее на то, что делает Tidal. Но пока это работает только для последнего пункта в списке. Я использую webui-popover,чтобы сделать это.

Что я уже пробовал:

Вот что я сделал до сих пор. Обратите внимание, что CSS и JavaScript для webui-popover были должным образом включены в проект.

Моя 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');


Сначала я получаю все предметы с классом больше и перебираю их по циклу:

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>


Прямо из коробки вы можете видеть, что каждая строка должна показывать всплывающее окно при нажатии на значок "еще", но это не так.

0 Ответов