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

Question

我放弃了 Bootstrap 弹出窗口，转而寻找。我发现WebUI Popover它具有我正在寻找的所有功能。

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

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

I have a FIDDLE here.

我的 WebUI Popover 代码是:

   // 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

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

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