WebUI Popover 无法使用 html 元素设置标题

Question

我放弃了 Bootstrap 弹出框，开始寻找。我找到了WebUI Popover，它具有我正在寻找的所有功能。

但我无法使用页面上元素的 html 内容设置弹出框的标题。我在console.log() 中得到undefined，标题加载为空。我尝试访问的 html 是动态创建的。

我认为插件中的一个错误是内容完美地从页面上的另一个元素加载。

I have a FIDDLE here.

我的 WebUI 弹出框代码是：

   // Popover Menu initialize
   $('.icon-popover-menu').webuiPopover({
     placement: 'left',
     trigger: 'click',
     closeable: true,
     multi: false,
     animation: 'pop',
     cache: 'false',
     type: 'html',
     width: '220',
     title: function() {
       return $(this).closest('td.row-icon').find('.btn-row-popover-menu-head').html();
     },
     content: function() {
       return $(this).closest('td.row-icon').find('.btn-row-popover-menu-body').html();
     }
   });

   // Hide popover when screen changes size
   $(window).on('resize', function() {
     WebuiPopovers.hideAll();
   });
   $(window).on('scroll', function() {
     WebuiPopovers.hideAll();
   });

我的 HTML 示例是：

<table class="fiddle">
  <tr>
    <td class="row-icon">
      <button class="icon-popover-menu ion-fw btn-row-popover-menu">BTN</button>
      <div style="display:none;">
        <div class="btn-row-popover-menu-head">
          <span>THIS IS THE TITLE</span>
        </div>
        <div class="btn-row-popover-menu-body">
          <div class="input-group" role="group">
            <a class="btn btn-app btn-icon-menu btn-popover-first" href="#">
              EDIT
            </a>
            <a class="btn btn-app btn-icon-menu-danger" href="#">
              DELETE
              <br>
              <span class="transaction-menu-legend">DELETE</span>
            </a>
          </div>
        </div>
      </div>
    </td>
</table>

感谢任何帮助。

Answer 1

title: function() { return $(event.target).closest('td.row-icon').find('.btn-row-popover-menu-head').html(); },

这很好用。通过执行$(this)，您正在尝试访问显然没有最接近的td.row-icon 的弹出框的标题元素。因此它是未定义的。